/* ==========================================================================
   kd6-tokens.css — Dashboard 6.0: the v6 website language (approved by Daniel,
   24 September 2026) for the customer dashboard. Loaded after every 5.0 file.
   tokens.css and shell.css stay protected; this file only redefines the custom
   properties they, the screens and the 5.0 files read.

   Source of the values: website-v5/lab/v6/tokens.css, nav.css and theme.css
   (branch claude/vigilant-villani-c522f1). Copy values, never import site CSS.

   The language, in the values below:
   - Flat colour, crisp edges. No glow, blur, luminous gradients or glass.
   - The blue ground #2a64a0 for dark surfaces (the rail, bands, the Vault) —
     not navy gradients. Pale blue to white for light grounds.
   - Ink #102d49; blue #006bcb for links and markers.
   - ONE orange #ff762b: the primary action, the H1 rule, and the seal. Text on it is ink.
   - The logo's slanted stroke (skewX -14deg, rotate -8deg) is the marker.
   - Montserrat 650 display (self-hosted variable font), Inter body.
   - Pill buttons; white cards with a hairline and a soft layered shadow.
   ========================================================================== */
:root{
  /* ---- v6 primitives (same values as the website) ------------------------- */
  --v6-ground:#2a64a0;          /* the blue ground: rail, bands, Vault */
  --v6-ground-hi:#3371b0;       /* a lifted tile on the blue ground */
  --v6-ground-lo:#22568b;       /* pressed / hairlines on the blue ground */
  --v6-ground-ink:#d6eeff;      /* eyebrows and quiet text on the blue */
  --v6-ground-text:rgba(236,244,252,.86);
  --v6-ground-line:rgba(191,227,255,.18);
  --v6-pale:#eef5fc;            /* pale blue ground */
  --v6-pale-2:#e3eef9;
  --v6-mist:#dcebf8;
  --v6-ink:#102d49; --v6-ink-2:#2b4460; --v6-slate:#56697f;
  /* muted TEXT (R34): 4.97:1 on white, 4.79:1 on the canvas, 4.52:1 on the pale section
     column. The website's #7d8b9c (3.47:1) stays as --v6-mute-soft for strokes and icons only. */
  --v6-mute:#627186; --v6-mute-soft:#7d8b9c;
  --v6-line:#dfe6ee;            /* cool hairline */
  --v6-blue:#006bcb; --v6-blue-700:#004e99; --v6-sky:#4fb3ff;
  --v6-sky-200:#bfe3ff; --v6-sky-100:#e3f2ff; --v6-ice:#eef6ff; --v6-tile:#f3f8fe;
  --v6-orange:#ff762b; --v6-orange-ink:#d8561c; --v6-peach:#fff0e6; --v6-peach-200:#ffdcc6;
  --v6-amber:#ffb347; --v6-ember:#ff4d2b;

  /* the one primary action: the orange pill. Flat #ff762b, no gradient and no orange glow
     (DECISIONS 25 Sep, pick 12): its text is ink #102d49, 5.3:1 (white on this orange is 2.67:1
     and fails WCAG AA). Hover lifts the pill; the colour stays the one orange. */
  --v6-on-orange:#102d49;
  --v6-cta-bg:#ff762b;
  --v6-cta-bg-hover:#ff762b;
  --v6-cta-shadow:inset 0 0 0 1px rgba(16,45,73,.08), 0 1px 2px rgba(16,45,73,.18);
  --v6-cta-shadow-hover:inset 0 0 0 1px rgba(16,45,73,.08), 0 1px 2px rgba(16,45,73,.18), 0 8px 18px -10px rgba(16,45,73,.4);
  /* the same pill over a House Rules accent (New, Upload's go, the Tool Room's verb read --accent):
     flat — no sheen — with the neutral lift above; the text colour is --on-accent, set per accent */
  --v6-sheen:none;
  --v6-sheen-hover:none;
  --v6-accent-shadow:var(--v6-cta-shadow);
  --v6-accent-shadow-hover:var(--v6-cta-shadow-hover);

  /* type */
  --v6-display:'Montserrat','Inter',system-ui,sans-serif;
  --v6-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --v6-h1:650 34px/1.08 var(--v6-display);
  --v6-h1-track:-.03em;
  --v6-h2:650 20px/1.2 var(--v6-display);
  --v6-h2-track:-.02em;
  --v6-h3:650 16px/1.3 var(--v6-display);
  --v6-eyebrow:600 12px/1 var(--v6-body);
  --v6-eyebrow-track:.15em;

  /* geometry */
  --v6-r-xs:6px; --v6-r-sm:10px; --v6-r-md:14px; --v6-r-lg:20px; --v6-r-xl:28px; --v6-r-pill:999px;
  /* shadows — layered, never one fuzzy blob */
  --v6-card-shadow:inset 0 0 0 1px rgba(16,45,73,.07), 0 1px 2px rgba(16,45,73,.05), 0 16px 40px -24px rgba(16,45,73,.32);
  --v6-card-shadow-hover:inset 0 0 0 1px rgba(0,107,203,.18), 0 1px 2px rgba(16,45,73,.05), 0 18px 40px -20px rgba(16,45,73,.38);
  --v6-pop-shadow:inset 0 0 0 1px rgba(16,45,73,.06), 0 2px 6px rgba(6,22,42,.06), 0 28px 70px -22px rgba(6,22,42,.4);
  --v6-sh-1:0 1px 1px rgba(16,45,73,.04), 0 2px 6px rgba(16,45,73,.06);
  --v6-ring:0 0 0 3px rgba(0,107,203,.18);

  /* motion */
  --v6-ease:cubic-bezier(.2,.8,.2,1);
  --v6-t-hover:140ms;

  /* the slanted stroke (the logo's own lean) */
  --v6-lean:skewX(-14deg) rotate(-8deg);
  /* the mark as a flat poster (theme.css): four strokes in the logo's shape, tonal blue */
  --v6-poster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cg transform='translate(40 36) rotate(-8) skewX(-14) translate(-31 -32)' stroke-linecap='round' stroke-width='6.5'%3E%3Cpath d='M13 14V50' stroke='%23004e99' stroke-opacity='.16'/%3E%3Cpath d='M25 9V55' stroke='%23004e99' stroke-opacity='.22'/%3E%3Cpath d='M37 13V51' stroke='%23004e99' stroke-opacity='.13'/%3E%3Cpath d='M49 18V46' stroke='%23004e99' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");

  /* ---- surfaces the shell reads (flip under dark) -------------------------- */
  --v6-rail:var(--v6-ground);
  --v6-rail-fg:rgba(236,244,252,.78);
  --v6-rail-fg-hi:#ffffff;
  --v6-rail-hover:rgba(191,227,255,.12);
  --v6-rail-active:rgba(255,255,255,.14);
  --v6-side:var(--v6-pale);     /* the section column */
  --v6-canvas:#f8fbfe;          /* behind the content */
  --v6-band:var(--v6-ground);   /* flat blue bands (Ask, Vault door) */

  /* ---- the 5.0 semantic aliases, moved to v6 ------------------------------ */
  --kd-canvas:var(--v6-canvas);
  --kd-raised:#ffffff;
  --kd-raised-2:var(--v6-ice);
  --kd-hairline:var(--v6-line);
  --kd-text:var(--v6-ink);
  --kd-text-2:var(--v6-ink-2);
  --kd-text-3:var(--v6-slate);
  --kd-link:var(--v6-blue);
  --kd-link-hover:var(--v6-blue-700);
  --kd-active-bg:var(--v6-ice);
  --kd-active-fg:var(--v6-blue-700);
  /* chips: the Sealed chip is the landing's (the one orange on peach); the Vault is flat blue */
  --kd-chip-sealed-bg:var(--v6-peach);   --kd-chip-sealed-fg:var(--v6-orange-ink);
  --kd-chip-unchanged-bg:var(--v6-ice);  --kd-chip-unchanged-fg:var(--v6-blue-700);
  --kd-chip-vault-bg:var(--v6-ground);   --kd-chip-vault-fg:#ffffff;
  --kd-seal-ok-bg:var(--v6-ice);         --kd-seal-ok-line:var(--v6-sky-200); --kd-seal-ok-ic:var(--v6-blue);

  /* legacy names every screen reads */
  --ink:var(--v6-ink); --slate:var(--v6-slate); --mute:var(--v6-mute); --line:var(--v6-line);
  --paper:var(--v6-canvas);
  --ink-900:var(--v6-ink); --ink-700:var(--v6-ink-2); --ink-500:var(--v6-slate);
  --ink-100:var(--v6-line); --ink-50:var(--v6-canvas);
  --font-display:var(--v6-display);
  --font-sans:var(--v6-body);
  /* v5 dawn/blue gradients are flat blue now */
  --g-surface-blue:var(--v6-ground);
  --g-surface-dawn:var(--v6-ground);
  --surface-blue:var(--v6-ground);
  --surface-dawn:var(--v6-ground);
  --wash-a:transparent; --wash-b:transparent;
  /* text on the accent: ink on the default orange (pick 12, AA); House Rules sets it per accent */
  --on-accent:var(--v6-on-orange);
  --accent-hi:#ef5f1f;
  --shadow-md:0 2px 6px rgba(6,22,42,.06), 0 18px 40px -18px rgba(6,22,42,.32);
  --shadow-lg:var(--v6-pop-shadow);
  --shadow-raise:0 14px 30px -18px rgba(16,45,73,.45);
  --focus-ring:2px solid var(--v6-blue);
}

/* ---- Dark look (Settings → Appearance → Dark). The website has no dark look; this
   keeps the same geometry on a deep blue ground, with the rail one step lighter. --- */
:root[data-theme="dark"]{
  --v6-rail:#163e66;
  --v6-rail-fg:rgba(226,238,250,.74);
  --v6-rail-hover:rgba(191,227,255,.10);
  --v6-rail-active:rgba(191,227,255,.16);
  --v6-side:#0e2a47;
  --v6-canvas:#0b1f36;
  --v6-band:#163e66;
  --v6-line:rgba(191,227,255,.14);
  --v6-tile:rgba(191,227,255,.08);
  --v6-card-shadow:inset 0 0 0 1px rgba(191,227,255,.10), 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -24px rgba(0,0,0,.6);
  --v6-card-shadow-hover:inset 0 0 0 1px rgba(79,179,255,.35), 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -20px rgba(0,0,0,.65);
  --v6-pop-shadow:inset 0 0 0 1px rgba(191,227,255,.12), 0 28px 70px -22px rgba(0,0,0,.7);
  --v6-ring:0 0 0 3px rgba(79,179,255,.28);
  --kd-canvas:var(--v6-canvas);
  --kd-raised:#11304f;
  --kd-raised-2:#173a5e;
  --kd-hairline:var(--v6-line);
  --kd-text:#ffffff; --kd-text-2:rgba(236,244,252,.82); --kd-text-3:rgba(226,238,250,.6);
  /* muted text on the dark grounds: 5.9:1 on the canvas, 4.8:1 on a raised card */
  --v6-mute:#94a3b5; --v6-mute-soft:#7d8b9c;
  --kd-link:var(--v6-sky); --kd-link-hover:#ffffff;
  --kd-active-bg:#173a5e; --kd-active-fg:var(--v6-sky);
  --kd-chip-sealed-bg:rgba(255,118,43,.16); --kd-chip-sealed-fg:#ffb48a;
  --kd-chip-vault-bg:var(--v6-ground);      --kd-chip-vault-fg:#ffffff;
  --paper:var(--v6-canvas); --ink-50:var(--v6-canvas); --white:#11304f;
  --ink-100:#1f4266;
  --on-accent:var(--v6-on-orange);
}