/* =========================================================================
   SkyFresh AI prototype — design tokens
   =========================================================================

   Three materials, deliberately distinct:

     office     the light surface everything sits on: header, rail, Review
                Console, Dashboard, Flight Plan.
     instrument the Line Station panel. Dark, high-contrast, built to be read
                from across a room. Only the station uses it.
     demo       the slate strip wrapped around the product. Tooling, not
                product; a QA lead should never mistake it for the operator
                screen.

   Two choices are NOT arbitrary and must survive any reskin:

     1. PASS / LOLOS is steel blue, never green. No green tick may read as
        "fit to serve". LOLOS means "passes to the next stage".
     2. REVIEW / PERIKSA is a solid amber block with near-black text. It is
        the one loud thing on the screen, because the acceptance criterion
        for the flag state is legibility from the back of the room.

   Brand blue is reserved for interaction and identity. Amber is reserved
   for REVIEW. Nothing else is coloured.

   No web fonts. System stacks only — the demo must survive a room with no
   working wifi, and a font that fails to load is a layout that reshuffles
   mid-pitch.
   ========================================================================= */

:root {
  /* --- Office surfaces -------------------------------------------------- */
  --surface-0: #ffffff;
  --surface-1: #f3f5f8;
  --surface-2: #e8ecf1;
  --surface-3: #d9dfe7;

  /* --- Instrument surfaces (Line Station only) --------------------------- */
  --hmi-0: #0c1116;
  --hmi-1: #141b22;
  --hmi-2: #1c252e;
  --hmi-line: #2a3541;
  --hmi-ink: #e8eef4;
  --hmi-ink-dim: #96a3b2;
  --hmi-ink-faint: #64717f;

  /* --- Demo scaffolding --------------------------------------------------- */
  --demo-bg: #1e2733;
  --demo-bg-deep: #182029;
  --demo-bg-raised: #283445;
  --demo-ink: #d7e0ea;
  --demo-ink-dim: #8797a9;
  --demo-line: #364454;
  --demo-accent: #7cc4f0;
  --demo-accent-on: #0d1620;

  /* --- Ink ----------------------------------------------------------------- */
  --ink-strong: #0b1219;
  --ink: #1f2933;
  --ink-muted: #5b6b7b;
  --ink-faint: #8a98a6;
  --ink-inverse: #ffffff;

  /* --- Lines --------------------------------------------------------------- */
  --line: #d5dce4;
  --line-strong: #b9c3ce;
  --line-faint: #e7ebf0;

  /* --- Brand (interaction + identity only) --------------------------------- */
  --brand: #0f6fb5;
  --brand-deep: #0a5388;
  --brand-tint: #e5f1fa;
  --brand-line: #b6d4ea;

  /* --- Verdict: PASS / LOLOS ------------------------------------------------ */
  --pass-bg: #1d5f8f;
  --pass-on: #ffffff;
  --pass-ink: #0f4470;
  --pass-bg-soft: #e6f0f8;
  --pass-line: #a9c8e0;

  /* --- Verdict: REVIEW / PERIKSA -------------------------------------------- */
  --review-bg: #f5a524;        /* the instrument block */
  --review-on: #160f00;        /* text on that block */
  --review-deep: #c2410c;      /* text, edges and buttons on light surfaces */
  --review-deep-hover: #a83609;
  --review-bg-soft: #fdf1e3;
  --review-line: #f2c48a;

  /* --- Certainty (a word, never a number, never a bar) ---------------------- */
  --cert-clear-ink: var(--pass-ink);
  --cert-clear-bg: var(--pass-bg-soft);
  --cert-clear-line: var(--pass-line);
  --cert-probable-ink: #7a5a0c;
  --cert-probable-bg: #fdf6e3;
  --cert-probable-line: #ecd39a;
  --cert-uncertain-ink: var(--ink-muted);
  --cert-uncertain-bg: var(--surface-1);
  --cert-uncertain-line: var(--line-strong);

  /* --- Markers --------------------------------------------------------------- */
  --mock-ink: #5d4f86;
  --mock-bg: #f1eefa;
  --mock-line: #d6cdec;
  --mock-on-dark: #b9a9dc;
  --live-ink: var(--brand-deep);
  --live-bg: var(--brand-tint);
  --live-line: var(--brand-line);
  --cached-ink: #6b4e00;
  --cached-bg: #fdf3dc;
  --cached-line: #ecd39a;

  /* --- Type ------------------------------------------------------------------- */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "SF Pro Text", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui,
    -apple-system, "SF Pro Display", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, "SF Mono",
    Menlo, Consolas, monospace;

  --fs-micro: 0.6875rem;   /* 11px   markers, meta */
  --fs-small: 0.78125rem;  /* 12.5px secondary language, captions */
  --fs-body: 0.90625rem;   /* 14.5px body */
  --fs-lead: 1.0625rem;    /* 17px   finding labels */
  --fs-h3: 0.9375rem;      /* 15px   panel titles */
  --fs-h2: 1.375rem;
  --fs-h1: 1.75rem;        /* 28px   screen titles */
  --fs-verdict: 3.5rem;    /* 56px   PASS */
  --fs-verdict-lg: 4.5rem; /* 72px   REVIEW */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --tracking-caps: 0.1em;

  /* --- Space ------------------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* --- Radius / shadow --------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  /* Overlay boxes are an indication, not a measurement: softer than the UI. */
  --r-overlay: 4px;

  --shadow-1: 0 1px 2px rgba(11, 18, 25, 0.05);
  --shadow-2: 0 4px 14px rgba(11, 18, 25, 0.08);
  --shadow-3: 0 12px 36px rgba(11, 18, 25, 0.18);
  --shadow-hmi: 0 18px 44px rgba(11, 18, 25, 0.28), inset 0 0 0 1px var(--hmi-line);

  --maxw: 1400px;
}