/* Design tokens: the one place colours, type, spacing, radii, shadows and motion live.
 * Look: the public landing (site/landing): night base, glass cards with an iridescent edge,
 * an acid-yellow hero, CSS-3D extruded buttons, Inter Tight (headings italic 900, numbers
 * and tables upright with tabular figures for legibility).
 * Dark (night) is the default; light (paper) follows the system when it asks for light, and
 * any element can carry data-theme to switch its own subtree (the login card is always night).
 * TestTokens_ContrastAA reads this file: keep colours as #hex or rgba(), keep the three
 * selector blocks below, and keep both light blocks identical.
 * Contrast targets (design_test.go): body text 4.5:1, headings and numbers 7:1, UI and focus 3:1.
 * Breakpoints (CSS cannot read tokens there): 1080 compact nav, 900 one column, 720 phone, 370 small phone.
 */
:root,
[data-theme="dark"] {
  /* landing palette (site/landing/src/palette.json) */
  --yellow: #F2E31B;
  --black: #0A0A0A;
  --nav-on-bg: #F2E31B;
  --nav-on-ink: #0A0A0A;

  /* hero: acid yellow, black ink (the landing's yellow moment) */
  --hero-top: #F8EE55;
  --hero: #F2E31B;
  --hero-deep: #E3D311;
  --hero-side: #8A7F00;
  --on-hero: #0A0A0A;
  --on-hero-2: rgba(10, 10, 10, 0.82);
  --hero-btn: #0A0A0A;
  --hero-btn-ink: #F2E31B;
  --hero-btn-hover: #1B1648;
  --hero-chip: #0A0A0A;
  --on-hero-chip: #F6F3FF;
  --on-hero-chip-2: #C9C3E6;
  --badge-bg: #0A0A0A;
  --badge-ink: #F2E31B;

  /* brand: violet to teal */
  --brand: #B08CFF;
  --brand-hover: #C4A6FF;
  --brand-soft: #2A1F66;
  --brand-ink: #D2BEFF;
  --on-brand: #0A0A0A;
  --btn-a: #B08CFF;
  --btn-mid: #7FB0FF;
  --btn-b: #19E6D2;
  --btn-face: linear-gradient(135deg, var(--btn-a) 0%, var(--btn-mid) 52%, var(--btn-b) 100%);
  --btn-face-hover: linear-gradient(135deg, #C4A6FF 0%, #93C0FF 52%, #3DF0DE 100%);
  --btn-ink: #0A0A0A;
  --btn-side: #3F2A9E;
  --btn-glow: rgba(176, 140, 255, 0.55);
  --btn2-a: #261F68;
  --btn2-b: #140F3A;
  --btn2-face: linear-gradient(180deg, var(--btn2-a) 0%, var(--btn2-b) 100%);
  --btn2-ink: #F6F3FF;
  --btn2-side: #040210;

  /* surfaces and ink */
  --bg: #070514;
  --card: #120E34;
  --raised: #1C1750;
  --ink: #F6F3FF;
  --ink-2: #C9C3E6;
  --ink-3: #A8A1CF;
  --ink-4: #8C85B3;
  --line: #2B2560;
  --line-strong: #4A4396;
  --scrim: rgba(4, 2, 16, 0.7);
  --skeleton: #2B2560;
  --edge: linear-gradient(135deg, rgba(176, 140, 255, 0.75), rgba(255, 92, 200, 0.38) 45%, rgba(25, 230, 210, 0.6));
  --sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 46%);
  --glow: radial-gradient(60% 50% at 85% -10%, rgba(176, 140, 255, 0.2), rgba(176, 140, 255, 0) 70%), radial-gradient(50% 40% at 0% 105%, rgba(25, 230, 210, 0.1), rgba(25, 230, 210, 0) 70%);

  /* meaning */
  --up: #2BFF8A;
  --up-soft: #0D2D2B;
  --down: #FF6BB8;
  --down-soft: #38112F;
  --warn: #FFC83D;
  --warn-soft: #30250C;
  --warn-solid: #FFC83D;
  --on-warn-solid: #1A1200;
  --live: #2BFF8A;
  --live-ink: #2BFF8A;
  --live-soft: #0D2D2B;
  --running-dot: #2BFF8A;
  --test-bg: #B81D6B;
  --on-test: #FFFFFF;
  --crit-bg: #38112F;
  --on-crit: #F6F3FF;
  --avatar-bg: #2A1F66;
  --avatar-ink: #D2BEFF;
  --knob: #FFFFFF;
  --toast-bg: #1C1750;
  --toast-ink: #F6F3FF;
  --toast-ok: #2BFF8A;
  --toast-down: #FF8FCB;

  /* depth */
  --shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.7);
  --hero-shadow: 0 8px 0 #8A7F00, 0 34px 56px -22px rgba(0, 0, 0, 0.75);
  --float-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
  --pop-shadow: 0 0 0 1px #4A4396, 0 18px 44px -8px rgba(0, 0, 0, 0.8);

  color-scheme: dark;

  /* type: Inter Tight. Display = italic 900 (headings, nav, buttons); text, numbers, tables = upright */
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: 84px;
  --fs-hero-phone: 50px;
  --fs-hero-small: 44px;
  --fs-flow: 28px;
  --fs-item: 26px;
  --fs-h2: 22px;
  --fs-num-phone: 19px;
  --fs-h2-phone: 18px;
  --fs-lead: 16px;
  --fs-body: 15px;
  --fs-nav: 14px;
  --fs-meta: 13px;
  --fs-tiny: 11px;
  --fw-regular: 500;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;
  --lh-none: 1;
  --lh-snug: 1.2;
  --lh-body: 1.4;
  --ls-hero: -0.03em;
  --ls-num: -0.02em;
  --ls-title: -0.02em;
  --ls-label: 0.07em;
  --ls-caps: 0.08em;
  --ls-btn: 0.04em;

  /* spacing (px steps used by the reference) */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 22px;
  --space-11: 24px;
  --space-12: 26px;
  --space-13: 28px;
  --space-14: 30px;
  --space-15: 32px;
  --space-16: 36px;
  --space-17: 40px;
  --space-18: 44px;
  --space-19: 48px;

  /* radii: nested surfaces follow outer = inner + padding */
  --radius-xs: 6px;
  --radius-sm: 11px;
  --radius-mark: 50%;
  --radius-input: 14px;
  --radius-tab: 18px;
  --radius-card-phone: 24px;
  --radius-card: 30px;
  --radius-pill: 999px;

  /* size */
  --tap: 44px;
  --tap-phone: 38px;
  --act: 60px;
  --act-phone: 52px;
  --avatar: 38px;
  --max-width: 1200px;
  --gutter: 32px;
  --gutter-phone: 16px;
  --btn-depth: 5px;

  /* motion */
  --dur-press: 100ms;
  --dur: 150ms;
  --dur-slow: 250ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* hero: acid yellow, black ink (the landing's yellow moment) */
    --hero-top: #F8EE55;
    --hero: #F2E31B;
    --hero-deep: #E3D311;
    --hero-side: #8A7F00;
    --on-hero: #0A0A0A;
    --on-hero-2: rgba(10, 10, 10, 0.82);
    --hero-btn: #0A0A0A;
    --hero-btn-ink: #F2E31B;
    --hero-btn-hover: #261F68;
    --hero-chip: #0A0A0A;
    --on-hero-chip: #F6F3FF;
    --on-hero-chip-2: #C9C3E6;
    --badge-bg: #0A0A0A;
    --badge-ink: #F2E31B;

    /* brand: violet to teal */
    --brand: #6A3DE8;
    --brand-hover: #5A2DD6;
    --brand-soft: #ECE5FF;
    --brand-ink: #5A2DD6;
    --on-brand: #FFFFFF;
    --btn-a: #B08CFF;
    --btn-mid: #7FB0FF;
    --btn-b: #19E6D2;
    --btn-face: linear-gradient(135deg, var(--btn-a) 0%, var(--btn-mid) 52%, var(--btn-b) 100%);
    --btn-face-hover: linear-gradient(135deg, #C4A6FF 0%, #93C0FF 52%, #3DF0DE 100%);
    --btn-ink: #0A0A0A;
    --btn-side: #4B2FB8;
    --btn-glow: rgba(106, 61, 232, 0.4);
    --btn2-a: #FFFFFF;
    --btn2-b: #EFEAFF;
    --btn2-face: linear-gradient(180deg, var(--btn2-a) 0%, var(--btn2-b) 100%);
    --btn2-ink: #100C2E;
    --btn2-side: #CFC6F0;

    /* surfaces and ink */
    --bg: #F6F3FF;
    --card: #FFFFFF;
    --raised: #EFEAFF;
    --ink: #100C2E;
    --ink-2: #4A4570;
    --ink-3: #5A5483;
    --ink-4: #8A84AE;
    --line: #E3DCF8;
    --line-strong: #BDB3E6;
    --scrim: rgba(16, 12, 46, 0.5);
    --skeleton: #E3DCF8;
    --edge: linear-gradient(135deg, rgba(106, 61, 232, 0.5), rgba(255, 92, 200, 0.3) 45%, rgba(25, 200, 190, 0.5));
    --sheen: linear-gradient(160deg, rgba(176, 140, 255, 0.1), rgba(255, 255, 255, 0) 50%);
    --glow: radial-gradient(60% 50% at 85% -10%, rgba(176, 140, 255, 0.16), rgba(176, 140, 255, 0) 70%), radial-gradient(50% 40% at 0% 105%, rgba(25, 230, 210, 0.08), rgba(25, 230, 210, 0) 70%);

    /* meaning */
    --up: #0A7A40;
    --up-soft: #DDF6E8;
    --down: #B3186F;
    --down-soft: #FCE4F1;
    --warn: #8A5600;
    --warn-soft: #FFF0C9;
    --warn-solid: #FFC83D;
    --on-warn-solid: #1A1200;
    --live: #1BC46A;
    --live-ink: #0A7A40;
    --live-soft: #DDF6E8;
    --running-dot: #2BFF8A;
    --test-bg: #B81D6B;
    --on-test: #FFFFFF;
    --crit-bg: #FCE4F1;
    --on-crit: #100C2E;
    --avatar-bg: #ECE5FF;
    --avatar-ink: #5A2DD6;
    --knob: #FFFFFF;
    --toast-bg: #100C2E;
    --toast-ink: #F6F3FF;
    --toast-ok: #2BFF8A;
    --toast-down: #FF8FCB;

    /* depth */
    --shadow: 0 1px 2px rgba(16, 12, 46, 0.06), 0 10px 28px -12px rgba(16, 12, 46, 0.16);
    --hero-shadow: 0 8px 0 #8A7F00, 0 30px 50px -24px rgba(16, 12, 46, 0.45);
    --float-shadow: 0 10px 30px rgba(16, 12, 46, 0.2);
    --pop-shadow: 0 1px 2px rgba(16, 12, 46, 0.08), 0 18px 44px -8px rgba(16, 12, 46, 0.3);

    color-scheme: light;
  }
}

[data-theme="light"] {
  /* hero: acid yellow, black ink (the landing's yellow moment) */
  --hero-top: #F8EE55;
  --hero: #F2E31B;
  --hero-deep: #E3D311;
  --hero-side: #8A7F00;
  --on-hero: #0A0A0A;
  --on-hero-2: rgba(10, 10, 10, 0.82);
  --hero-btn: #0A0A0A;
  --hero-btn-ink: #F2E31B;
  --hero-btn-hover: #261F68;
  --hero-chip: #0A0A0A;
  --on-hero-chip: #F6F3FF;
  --on-hero-chip-2: #C9C3E6;
  --badge-bg: #0A0A0A;
  --badge-ink: #F2E31B;

  /* brand: violet to teal */
  --brand: #6A3DE8;
  --brand-hover: #5A2DD6;
  --brand-soft: #ECE5FF;
  --brand-ink: #5A2DD6;
  --on-brand: #FFFFFF;
  --btn-a: #B08CFF;
  --btn-mid: #7FB0FF;
  --btn-b: #19E6D2;
  --btn-face: linear-gradient(135deg, var(--btn-a) 0%, var(--btn-mid) 52%, var(--btn-b) 100%);
  --btn-face-hover: linear-gradient(135deg, #C4A6FF 0%, #93C0FF 52%, #3DF0DE 100%);
  --btn-ink: #0A0A0A;
  --btn-side: #4B2FB8;
  --btn-glow: rgba(106, 61, 232, 0.4);
  --btn2-a: #FFFFFF;
  --btn2-b: #EFEAFF;
  --btn2-face: linear-gradient(180deg, var(--btn2-a) 0%, var(--btn2-b) 100%);
  --btn2-ink: #100C2E;
  --btn2-side: #CFC6F0;

  /* surfaces and ink */
  --bg: #F6F3FF;
  --card: #FFFFFF;
  --raised: #EFEAFF;
  --ink: #100C2E;
  --ink-2: #4A4570;
  --ink-3: #5A5483;
  --ink-4: #8A84AE;
  --line: #E3DCF8;
  --line-strong: #BDB3E6;
  --scrim: rgba(16, 12, 46, 0.5);
  --skeleton: #E3DCF8;
  --edge: linear-gradient(135deg, rgba(106, 61, 232, 0.5), rgba(255, 92, 200, 0.3) 45%, rgba(25, 200, 190, 0.5));
  --sheen: linear-gradient(160deg, rgba(176, 140, 255, 0.1), rgba(255, 255, 255, 0) 50%);
  --glow: radial-gradient(60% 50% at 85% -10%, rgba(176, 140, 255, 0.16), rgba(176, 140, 255, 0) 70%), radial-gradient(50% 40% at 0% 105%, rgba(25, 230, 210, 0.08), rgba(25, 230, 210, 0) 70%);

  /* meaning */
  --up: #0A7A40;
  --up-soft: #DDF6E8;
  --down: #B3186F;
  --down-soft: #FCE4F1;
  --warn: #8A5600;
  --warn-soft: #FFF0C9;
  --warn-solid: #FFC83D;
  --on-warn-solid: #1A1200;
  --live: #1BC46A;
  --live-ink: #0A7A40;
  --live-soft: #DDF6E8;
  --running-dot: #2BFF8A;
  --test-bg: #B81D6B;
  --on-test: #FFFFFF;
  --crit-bg: #FCE4F1;
  --on-crit: #100C2E;
  --avatar-bg: #ECE5FF;
  --avatar-ink: #5A2DD6;
  --knob: #FFFFFF;
  --toast-bg: #100C2E;
  --toast-ink: #F6F3FF;
  --toast-ok: #2BFF8A;
  --toast-down: #FF8FCB;

  /* depth */
  --shadow: 0 1px 2px rgba(16, 12, 46, 0.06), 0 10px 28px -12px rgba(16, 12, 46, 0.16);
  --hero-shadow: 0 8px 0 #8A7F00, 0 30px 50px -24px rgba(16, 12, 46, 0.45);
  --float-shadow: 0 10px 30px rgba(16, 12, 46, 0.2);
  --pop-shadow: 0 1px 2px rgba(16, 12, 46, 0.08), 0 18px 44px -8px rgba(16, 12, 46, 0.3);

  color-scheme: light;
}