/* ============================================================
   SPUN Medika — design tokens
   Every colour literal below is a computed value measured from
   spun.global/id. Source of truth: RECON/original-recon-summary.md
   Do not add a colour that is not in that table (semantic layer
   excepted — see --ok/--warn/--risk, scoped per design-dna.json).
   ============================================================ */

@import url('fonts/fonts.css');

:root {
  /* ---- surfaces (recon palette ranks 1,3,6,9) ---- */
  --bg:            #fafafa;
  --surface:       #ffffff;
  --surface-warm:  #fff6ed;
  --surface-chip:  #efeceb;

  /* ---- ink (ranks 2,7,4,11) ---- */
  --fg:            #000000;
  --fg-control:    #171412;
  --muted:         #89766c;
  --muted-light:   #bcb0a9;

  /* ---- lines (ranks 10,12) ---- */
  --border:        #dbd5d1;
  --hairline:      #e5e7eb;

  /* ---- accents (ranks 5,8) ---- */
  --accent:        #ff7524;
  --accent-2:      #db4268;

  /* ---- semantic layer: confidence + open items ONLY.
         Always paired with an icon and a text label.
         Never a large fill. Never used for acuity/triage. ---- */
  --ok:            #16a34a;
  --warn:          #d97706;
  --risk:          #dc2626;

  /* ---- derived tints (color-mix keeps us on the token set) ---- */
  --accent-wash:   color-mix(in oklch, var(--accent) 8%, var(--surface));
  --accent-2-wash: color-mix(in oklch, var(--accent-2) 7%, var(--surface));
  --ok-wash:       color-mix(in oklch, var(--ok) 10%, var(--surface));
  --warn-wash:     color-mix(in oklch, var(--warn) 12%, var(--surface));
  --risk-wash:     color-mix(in oklch, var(--risk) 9%, var(--surface));

  /* ---- geometry (recon: pill chips/inputs, 8px auth+promo, cards large) ---- */
  --r-pill:  9999px;
  --r-ctrl:  8px;
  --r-card:  16px;
  --r-tag:   6px;

  /* ---- elevation: border-led containment, very low alpha ---- */
  --sh-1: 0 1px 2px rgba(23, 20, 18, .04), 0 1px 1px rgba(23, 20, 18, .03);
  --sh-2: 0 8px 24px rgba(23, 20, 18, .10), 0 2px 6px rgba(23, 20, 18, .05);

  /* ---- type (recon scale, letter-spacing normal throughout) ---- */
  --f: 'Instrument Sans', system-ui, sans-serif;
  --t-display: 700 clamp(34px, 4.4vw, 48px) / 1.06 var(--f);
  --t-section: 600 clamp(24px, 2.6vw, 30px) / 1.18 var(--f);
  --t-eyebrow: 500 clamp(18px, 1.9vw, 24px) / 1.3 var(--f);
  --t-subhead: 600 18px / 1.35 var(--f);
  --t-body:    400 16px / 1.55 var(--f);
  --t-card:    600 14px / 1.35 var(--f);
  --t-item:    500 14px / 1.4 var(--f);
  --t-ctrl:    600 14px / 1 var(--f);
  --t-meta:    400 13px / 1.45 var(--f);

  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--t-body);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .wrap { padding-inline: 16px; } }

.eyebrow  { font: var(--t-eyebrow); color: var(--fg); }
.display  { font: var(--t-display); }
.h-section{ font: var(--t-section); }
.h-sub    { font: var(--t-subhead); }
.meta     { font: var(--t-meta); color: var(--muted); }
.muted    { color: var(--muted); }
.tertiary { color: var(--muted-light); }
.price    { color: var(--accent); font-weight: 700; }
.tnum     { font-variant-numeric: tabular-nums; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}