/* tokens/fonts.css */
/* ======================================================================
   Fonts. Production is SELF-HOSTED: in Next.js these families load through
   next/font/local from /public/fonts, which is why every size below is
   fixed and no layout shift is possible. See architecture.md > Fonts.

   No font binaries were supplied to this project, so the @font-face block
   that production uses is commented out below and the Google Fonts CDN
   stands in so the specimens and templates render. Drop the .woff2 files
   into fonts/, swap the two blocks, and nothing else changes —
   the family names are identical.
   ====================================================================== */


/* ---- production form (uncomment once the binaries land) ---------------
@font-face{font-family:"Sora";src:url("../fonts/sora-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Sora";src:url("../fonts/sora-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
----------------------------------------------------------------------- */

/* tokens/colors.css */
:root{
  /* ======================================================================
     Blues and whites. There is no second hue in this system — status,
     accent and emphasis are all built from value, fill and edge.
     Ratios below are measured, not estimated.
     ====================================================================== */

  /* ---- the one scale --------------------------------------------------- */
  --b-50:#F2F7FD;
  --b-100:#E3EDFB;
  --b-200:#C6DBF5;
  --b-300:#9BBFEE;
  --b-400:#5E97E2;
  --b-500:#1E6FD9;  /* action fill — white on it is 4.85:1 */
  --b-600:#0F55B4;  /* 7.05:1 on white — blue TEXT and hover */
  --b-700:#0B4189;  /* 9.85:1 */
  --b-800:#0A3060;  /* 13.09:1 */
  --b-900:#0A2440;
  --b-950:#07182B;  /* 17.88:1 — ink */

  /* ---- surfaces: white, three near-whites, two inks ------------------- */
  --void:#FFFFFF;      /* cards, inputs, anything raised */
  --ground:#F4F8FD;    /* the page */
  --sunken:#FAFCFE;    /* wells inside a white card */
  --sunken-2:#EAF1FA;  /* second-tier well, inactive track */
  --ink:#07182B;       /* full-bleed dark sections */
  --ink-deep:#04101E;  /* footer, deepest panel */

  /* ---- edges — pick by what is BEHIND the line ------------------------- */
  --edge:#E6EEF8;                    /* on white */
  --edge-strong:#CBDCEE;             /* on --ground */
  --edge-active:var(--b-300);        /* selected / focused container */
  --edge-dark:rgba(255,255,255,.12); /* on --ink */

  /* ---- text ------------------------------------------------------------ */
  --tx:#07182B;          /* 17.88:1 on white — headings */
  --tx-body:#223C57;     /* 11.34:1 — running copy */
  --tx-2:#43617F;        /*  6.45:1 — secondary */
  --tx-muted:#54718E;    /*  5.09:1 — smallest compliant grey-blue */
  --tx-faint:#7392B0;    /*  3.25:1 — 18px and up ONLY */
  --tx-on-ink:#FFFFFF;
  --tx-on-ink-2:#9FB8D0; /*  8.72:1 on --ink */

  /* ---- action ---------------------------------------------------------- */
  --blue:var(--b-500);       /* fills */
  --blue-deep:var(--b-600);  /* fill hover, and blue text on white */
  --blue-soft:var(--b-100);  /* tint fill */
  --blue-softer:var(--b-50);
  --blue-light:var(--b-300); /* links inside dark sections */

  /* ---- work states ------------------------------------------------------
     Six states, one hue. They separate by VALUE, FILL and EDGE — solid ink,
     solid blue, tint, outline, dashed outline, near-white. Each carries its
     own dot treatment too, so the set survives greyscale and colourblindness.
     ---------------------------------------------------------------------- */
  --st-active-fg:#FFFFFF;      --st-active-bg:var(--b-500);   --st-active-edge:transparent;
  --st-waiting-fg:var(--b-700); --st-waiting-bg:var(--b-50);  --st-waiting-edge:transparent;
  --st-decision-fg:var(--b-800);--st-decision-bg:var(--b-200); --st-decision-edge:transparent;
  --st-verified-fg:var(--b-700);--st-verified-bg:#FFFFFF;     --st-verified-edge:var(--b-300);
  --st-uncertain-fg:var(--b-700);--st-uncertain-bg:#FFFFFF;   --st-uncertain-edge:var(--b-300); /* dashed */
  --st-blocked-fg:#FFFFFF;      --st-blocked-bg:var(--b-950);  --st-blocked-edge:transparent;

  /* ---- state inks ------------------------------------------------------
     The single ink for each state, for the places that need one value
     rather than a (fg, bg, edge) triple: a dashed border, an error border,
     a legend dot. Keep these in step with the triples above. */
  --st-active:var(--b-500);
  --st-waiting:var(--b-300);
  --st-decision:var(--b-600);
  --st-verified:var(--b-500);
  --st-uncertain:var(--b-300);
  --st-blocked:var(--b-950);

  /* ---- semantic aliases — prefer these in components ------------------ */
  --surface-page:var(--ground);
  --surface-card:var(--void);
  --surface-well:var(--sunken);
  --surface-inverse:var(--ink);
  --border-on-card:var(--edge);
  --border-on-page:var(--edge-strong);
  --border-on-inverse:var(--edge-dark);
  --text-heading:var(--tx);
  --text-body:var(--tx-body);
  --text-secondary:var(--tx-2);
  --text-label:var(--tx-muted);
  --text-inverse:var(--tx-on-ink);
  --text-inverse-2:var(--tx-on-ink-2);
  --action:var(--blue);
  --action-hover:var(--blue-deep);
  --action-tint:var(--blue-soft);
  --action-on-inverse:var(--blue-light);
  --focus-ring:var(--b-200);
}

/* tokens/typography.css */
:root{
  /* ---- families -------------------------------------------------------- */
  --display:"Sora", ui-sans-serif, system-ui, sans-serif; /* @kind font */
  --body:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; /* @kind font */
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* @kind font */

  /* ---- weights --------------------------------------------------------- */
  --w-display:600; /* @kind font */ /* Sora 600 is the display weight */
  --w-display-heavy:800; /* @kind font */ /* wordmark / giant footer word only */
  --w-body:400;          /* @kind font */
  --w-medium:500;        /* @kind font */
  --w-semibold:600;      /* @kind font */

  /* ---- display sizes (clamped: no breakpoint jumps) -------------------- */
  --fs-hero:clamp(40px,6.2vw,88px); /* @kind font */
  --fs-sec:clamp(30px,4.2vw,56px);  /* @kind font */
  --fs-sub:clamp(20px,2.2vw,32px);  /* @kind font */
  --fs-stat:clamp(56px,7vw,104px);  /* @kind font */

  /* ---- ui / body sizes ------------------------------------------------- */
  --fs-lead:clamp(16px,1.35vw,19px); /* @kind font */
  --fs-lg:18px;          /* @kind font */
  --fs-md:16px;          /* @kind font */
  --fs-sm:14px;          /* @kind font */
  --fs-xs:13px;          /* @kind font */
  --fs-mono-label:11px;  /* @kind font */

  /* ---- tracking — negative on every display size ---------------------- */
  --track-display:-.03em; /* @kind font */
  --track-stat:-.045em;   /* @kind font */
  --track-sub:-.02em;     /* @kind font */
  --track-ui:-.01em;      /* @kind font */
  --track-mono:.12em;     /* @kind font */

  /* ---- leading --------------------------------------------------------- */
  --lh-display:1.08; /* @kind font */
  --lh-sub:1.2;      /* @kind font */
  --lh-body:1.6;     /* @kind font */
  --lh-ui:1.35;      /* @kind font */
}

/* tokens/spacing.css */
:root{
  /* 4px base. Hand-place values from this ladder; do not invent in-betweens. */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-8:32px;
  --s-10:40px;
  --s-12:48px;
  --s-16:64px;
  --s-20:80px;

  /* ---- component padding ---------------------------------------------- */
  --pad-control:11px 16px; /* @kind spacing */ /* buttons, pills */
  --pad-input:0 12px; /* @kind spacing */ /* input inner, paired with --h-input */
  --pad-card:24px; /* @kind spacing */
  --pad-card-lg:clamp(20px,4vw,48px); /* @kind spacing */

  /* ---- control heights ------------------------------------------------- */
  --h-control:40px; /* @kind spacing */
  --h-input:42px; /* @kind spacing */
  --h-row:64px; /* @kind spacing */ /* hairline-separated list row */

  /* ---- page rhythm ----------------------------------------------------- */
  --gutter:24px; /* @kind spacing */
  --max:1512px; /* @kind spacing */
  --section-y:clamp(80px,10vw,160px); /* @kind spacing */
}

/* tokens/geometry.css */
:root{
  /* Two radii. There is no third value. */
  --r-sm:8px;    /* controls: buttons, inputs, chips, wells */
  --r-lg:16px;   /* containers: cards, panels, dark sections */
  --r-pill:999px;/* pills only — capsule badges, marquee items */

  /* Every border in the system is 1px solid, never thicker. */
  --bw:1px; /* @kind radius */
  --border-card:1px solid var(--edge); /* @kind other */
  --border-page:1px solid var(--edge-strong); /* @kind other */
  --border-inverse:1px solid var(--edge-dark); /* @kind other */
  --border-uncertain:1px dashed var(--st-uncertain); /* @kind other */

  /* The only legal shadow: something actually floating above the page. */
  --shadow-float:0 12px 32px rgba(11,21,32,.10);
}

/* tokens/motion.css */
:root{
  /* One curve, everywhere. */
  --ease:cubic-bezier(.16,1,.3,1); /* @kind other */
  --dur:800ms; /* @kind other */
  --dur-ui:250ms; /* @kind other */ /* hover / press on controls */
  --delay-1:50ms; /* @kind other */
  --delay-2:150ms; /* @kind other */
  --delay-3:250ms; /* @kind other */
  --delay-4:350ms; /* @kind other */
  --delay-5:450ms; /* @kind other */
}

/* The only two entrance keyframes in the system:
   opacity 0->1 plus translateY(10px)->0. It fires once. */
@keyframes rise-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rise-in-left{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

.enter{animation:rise-in var(--dur) var(--ease) both}
.enter-l{animation:rise-in-left 900ms var(--ease) both}
.d1{animation-delay:var(--delay-1)}
.d2{animation-delay:var(--delay-2)}
.d3{animation-delay:var(--delay-3)}
.d4{animation-delay:var(--delay-4)}
.d5{animation-delay:var(--delay-5)}

/* Scroll reveal: JS adds .in when the element crosses 15%. */
.reveal{opacity:0;transform:translateY(10px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .enter,.enter-l{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* styles.css */
/* Apneural / Madi design system — global entry point.
   Consumers link this one file. Imports only; never inline rules here. */