/* ============================================================
   ezpztrader.com — design tokens · default palette "EZPZ Violet"
   (ECOSYSTEM_REDESIGN.md §5)

   Near-black, violet-tinted ground shared with the other EZPZ sites.
   ONE violet action colour taken from the logo (buttons, links, focus,
   selected state). Green/red mean money and market direction only;
   status has its own tones. Every text pair is AA-checked.

   Dark is the default (server-rendered data-theme, see
   common/context_processors.py); light is designed, not inverted.
   Palette keys, labels and the --bg/--ink values used by the critical
   CSS and theme-color meta live in common/palettes.py; keep the two in
   step (common.tests.PaletteSourceTests checks it).

   The legacy names further down (--accent, --gold, --line,
   --bg-raised …) are PERMANENT aliases: older CSS and
   static/js/journal-ai-chat.js (getComputedStyle) read them.
   ============================================================ */

/* Cascade layers, weakest first (ECOSYSTEM_REDESIGN.md §6.5). `legacy` holds every
   pre-redesign rule unchanged; rules move out of it as their page is rebuilt. */
@layer legacy, tokens, base, components, shell, page, motion;

@layer legacy {

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --canvas: #050409;
  --bg: #09080E;
  --surface: #100E17;
  --raised: #15131E;
  --surface-hover: #1B1826;
  --sunken: #050409;
  --overlay: rgba(5, 4, 9, .72);

  /* ink */
  --ink: #F7F6FB;
  --ink-2: #D3CFE3;
  --ink-3: #8E89A2;

  /* lines */
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .15);
  --border-brand: rgba(155, 107, 255, .24);
  --input-border: #6B6585;

  /* action (violet) */
  --action: #7C4DDE;
  --action-hover: #6D3FD1;
  --on-action: #FFFFFF;
  --action-soft: rgba(124, 77, 222, .18);
  --action-ink: #A883FF;
  --link-hover: #C4A3FF;
  --action-border: transparent;
  --focus: #9467FE;

  /* brand (the logo's violet) */
  --brand: #9B6BFF;
  --brand-soft: rgba(155, 107, 255, .14);

  /* money / market direction */
  --buy: #3FCF8E;
  --buy-soft: rgba(63, 207, 142, .12);
  --sell: #FF6B7A;
  --sell-soft: rgba(255, 107, 122, .12);

  /* status tones */
  --ok: #3FCF8E;      --ok-soft: rgba(63, 207, 142, .12);
  --warn: #F0B44C;    --warn-soft: rgba(240, 180, 76, .13);
  --danger: #FF6B7A;  --danger-soft: rgba(255, 107, 122, .12);
  --on-danger: #1A0507;
  --info: #6AA7FF;    --info-soft: rgba(106, 167, 255, .13);
  --neutral: #8E89A2; --neutral-soft: rgba(142, 137, 162, .14);
  --live: #F0B44C;    --live-soft: rgba(240, 180, 76, .13);

  /* code */
  --code-bg: #050409;
  --code-ink: #DCD6FF;

  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 16px 40px rgba(0, 0, 0, .5);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, .45);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
  --on-buy: #04140C;
  --on-sell: #1A0507;
  --knob: #FFFFFF;
}

:root[data-theme="light"] {
  color-scheme: light;

  --canvas: #EFEDF6;
  --bg: #F7F6FB;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --surface-hover: #F3F1F9;
  --sunken: #EFEDF6;
  --overlay: rgba(19, 17, 28, .42);

  --ink: #13111C;
  --ink-2: #4A4560;
  --ink-3: #625D78;

  --border: #E4E1EE;
  --border-strong: #CFCADF;
  --border-brand: rgba(109, 63, 209, .28);
  --input-border: #8A85A0;

  --action: #6D3FD1;
  --action-hover: #5B30C2;
  --on-action: #FFFFFF;
  --action-soft: rgba(109, 63, 209, .10);
  --action-ink: #5B30C2;
  --link-hover: #47249E;
  --action-border: transparent;
  --focus: #6D3FD1;

  --brand: #6A45E6;
  --brand-soft: rgba(106, 69, 230, .10);

  --buy: #08774A;
  --buy-soft: rgba(8, 119, 74, .10);
  --sell: #C62839;
  --sell-soft: rgba(198, 40, 57, .09);

  --ok: #08774A;      --ok-soft: rgba(8, 119, 74, .10);
  --warn: #9A5B00;    --warn-soft: rgba(154, 91, 0, .10);
  --danger: #C62839;  --danger-soft: rgba(198, 40, 57, .09);
  --on-danger: #FFFFFF;
  --info: #2456C7;    --info-soft: rgba(36, 86, 199, .10);
  --neutral: #625D78; --neutral-soft: rgba(98, 93, 120, .10);
  --live: #9A5B00;    --live-soft: rgba(154, 91, 0, .10);

  --code-bg: #14122A;
  --code-ink: #E4DEFF;

  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .7);
  --shadow-1: 0 1px 2px rgba(19, 17, 28, .06);
  --shadow-2: 0 16px 40px rgba(19, 17, 28, .10);
  --shadow-pop: 0 8px 32px rgba(19, 17, 28, .14);
  --shadow-xs: 0 1px 2px rgba(19, 17, 28, .18);
  --on-buy: #FFFFFF;
  --on-sell: #FFFFFF;
  --knob: #FFFFFF;
}

/* ---- Alternate palettes, chosen in the palette picker. Each overrides
   every colour token in each theme. Buy/sell stay green/red. ---- */

/* Ion: graphite with a cyan action colour (UI_REDESIGN.md §11.1c values). */
:root[data-palette="ion"] {
  color-scheme: dark;
  --canvas: #07090C;
  --bg: #0A0C10;
  --surface: #10131A;
  --raised: #161A23;
  --surface-hover: #161A23;
  --sunken: #07090C;
  --overlay: rgba(3, 4, 7, .72);
  --ink: #E9EDF5;
  --ink-2: #AEB6C6;
  --ink-3: #858EA0;
  --border: rgba(214, 224, 245, .10);
  --border-strong: rgba(214, 224, 245, .18);
  --border-brand: rgba(155, 123, 255, .24);
  --input-border: #5C6678;
  --action: #36D3F2;
  --action-hover: #5EDDF6;
  --on-action: #031419;
  --action-soft: rgba(54, 211, 242, .12);
  --action-ink: #6FE0F7;
  --link-hover: #5EDDF6;
  --action-border: transparent;
  --focus: #36D3F2;
  --brand: #9B7BFF;
  --brand-soft: rgba(155, 123, 255, .14);
  --buy: #3CCF8E;
  --buy-soft: rgba(60, 207, 142, .12);
  --sell: #FF6B76;
  --sell-soft: rgba(255, 107, 118, .12);
  --ok: #3CCF8E;      --ok-soft: rgba(60, 207, 142, .12);
  --warn: #F2B544;    --warn-soft: rgba(242, 181, 68, .13);
  --danger: #FF6B76;  --danger-soft: rgba(255, 107, 118, .12);
  --on-danger: #1A0507;
  --info: #6AA7FF;    --info-soft: rgba(106, 167, 255, .13);
  --neutral: #8A93A5; --neutral-soft: rgba(138, 147, 165, .14);
  --live: #F2B544;    --live-soft: rgba(242, 181, 68, .13);
  --code-bg: #07090C;
  --code-ink: #CFE6F0;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 16px 40px rgba(0, 0, 0, .5);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .55);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
  --on-buy: #04140C;
  --on-sell: #1A0507;
  --knob: #FFFFFF;
}

:root[data-palette="ion"][data-theme="light"] {
  color-scheme: light;
  --canvas: #EEF0F3;
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --surface-hover: #F2F3F6;
  --sunken: #EEF0F3;
  --overlay: rgba(13, 17, 23, .42);
  --ink: #0D1117;
  --ink-2: #465062;
  --ink-3: #5F6878;
  --border: #E1E4EA;
  --border-strong: #CDD2DB;
  --border-brand: rgba(106, 69, 230, .28);
  --input-border: #7D8696;
  --action: #0B7E9C;
  --action-hover: #096C86;
  --on-action: #FFFFFF;
  --action-soft: rgba(11, 126, 156, .10);
  --action-ink: #086A84;
  --link-hover: #096C86;
  --action-border: transparent;
  --focus: #0B7E9C;
  --brand: #6A45E6;
  --brand-soft: rgba(106, 69, 230, .10);
  --buy: #08774A;
  --buy-soft: rgba(8, 119, 74, .10);
  --sell: #C62839;
  --sell-soft: rgba(198, 40, 57, .09);
  --ok: #08774A;      --ok-soft: rgba(8, 119, 74, .10);
  --warn: #9A5B00;    --warn-soft: rgba(154, 91, 0, .10);
  --danger: #C62839;  --danger-soft: rgba(198, 40, 57, .09);
  --on-danger: #FFFFFF;
  --info: #2456C7;    --info-soft: rgba(36, 86, 199, .10);
  --neutral: #5F6878; --neutral-soft: rgba(95, 104, 120, .10);
  --live: #9A5B00;    --live-soft: rgba(154, 91, 0, .10);
  --code-bg: #0F141C;
  --code-ink: #D7E7EE;
  --shadow-1: 0 1px 2px rgba(13, 17, 23, .06);
  --shadow-2: 0 16px 40px rgba(13, 17, 23, .10);
  --shadow-pop: 0 12px 32px rgba(13, 17, 23, .14);
  --shadow-xs: 0 1px 2px rgba(13, 17, 23, .18);
  --on-buy: #FFFFFF;
  --on-sell: #FFFFFF;
  --knob: #FFFFFF;
}

/* Solar: warm charcoal with a saffron action colour. */
:root[data-palette="solar"] {
  color-scheme: dark;
  --canvas: #0A0908;
  --bg: #0E0D0B;
  --surface: #161512;
  --raised: #1D1B17;
  --surface-hover: #1D1B17;
  --sunken: #0A0908;
  --overlay: rgba(6, 5, 4, .72);
  --ink: #F3EFE8;
  --ink-2: #BDB6AA;
  --ink-3: #968F83;
  --border: rgba(255, 244, 228, .09);
  --border-strong: rgba(255, 244, 228, .17);
  --border-brand: rgba(165, 139, 255, .24);
  --input-border: #6E685F;
  --action: #F4B740;
  --action-hover: #F8C665;
  --on-action: #1B1405;
  --action-soft: rgba(244, 183, 64, .12);
  --action-ink: #F6C35E;
  --link-hover: #F8C665;
  --action-border: transparent;
  --focus: #F4B740;
  --brand: #A58BFF;
  --brand-soft: rgba(165, 139, 255, .14);
  --buy: #49D195;
  --buy-soft: rgba(73, 209, 149, .12);
  --sell: #FF6E6E;
  --sell-soft: rgba(255, 110, 110, .12);
  --ok: #49D195;      --ok-soft: rgba(73, 209, 149, .12);
  --warn: #FF9A4D;    --warn-soft: rgba(255, 154, 77, .13);
  --danger: #FF6E6E;  --danger-soft: rgba(255, 110, 110, .12);
  --on-danger: #1A0505;
  --info: #79AEFF;    --info-soft: rgba(121, 174, 255, .13);
  --neutral: #A0998C; --neutral-soft: rgba(142, 135, 123, .14);
  --live: #FF9A4D;    --live-soft: rgba(255, 154, 77, .13);
  --code-bg: #0A0908;
  --code-ink: #F0E6D6;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 16px 40px rgba(0, 0, 0, .5);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .55);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
  --on-buy: #04140C;
  --on-sell: #1A0505;
  --knob: #FFFFFF;
}

:root[data-palette="solar"][data-theme="light"] {
  color-scheme: light;
  --canvas: #F3F0EA;
  --bg: #FAF8F4;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --surface-hover: #F7F4EE;
  --sunken: #F3F0EA;
  --overlay: rgba(23, 20, 15, .42);
  --ink: #17140F;
  --ink-2: #4F483D;
  --ink-3: #6B6355;
  --border: #E8E2D8;
  --border-strong: #D6CEC0;
  --border-brand: rgba(106, 69, 230, .28);
  --input-border: #918878;
  --action: #F2B13A;
  --action-hover: #E9A320;
  --on-action: #1B1405;
  --action-soft: rgba(242, 177, 58, .16);
  --action-ink: #8A5A00;
  --link-hover: #6E4800;
  --action-border: #BE850E;
  --focus: #9A6400;
  --brand: #6A45E6;
  --brand-soft: rgba(106, 69, 230, .10);
  --buy: #08774A;
  --buy-soft: rgba(8, 119, 74, .10);
  --sell: #C62839;
  --sell-soft: rgba(198, 40, 57, .09);
  --ok: #08774A;      --ok-soft: rgba(8, 119, 74, .10);
  --warn: #9E4806;    --warn-soft: rgba(180, 83, 12, .10);
  --danger: #C62839;  --danger-soft: rgba(198, 40, 57, .09);
  --on-danger: #FFFFFF;
  --info: #2456C7;    --info-soft: rgba(36, 86, 199, .10);
  --neutral: #6B6355; --neutral-soft: rgba(107, 99, 85, .10);
  --live: #A04807;    --live-soft: rgba(160, 72, 7, .10);
  --code-bg: #1A1611;
  --code-ink: #F0E6D6;
  --shadow-1: 0 1px 2px rgba(23, 20, 15, .06);
  --shadow-2: 0 16px 40px rgba(23, 20, 15, .10);
  --shadow-pop: 0 12px 32px rgba(23, 20, 15, .14);
  --shadow-xs: 0 1px 2px rgba(23, 20, 15, .18);
  --on-buy: #FFFFFF;
  --on-sell: #FFFFFF;
  --knob: #FFFFFF;
}

/* ---- PERMANENT legacy aliases (do not delete; see header) ---- */
:root {
  --bg-sunken: var(--sunken);
  --bg-raised: var(--raised);
  --bg-elevated: var(--raised);
  --ink-soft: var(--ink-2);
  --ink-faint: var(--ink-3);
  --line: var(--border);
  --line-soft: var(--border);

  --accent: var(--brand);
  --accent-strong: var(--brand);
  --accent-ink: var(--brand);
  --accent-soft: var(--brand-soft);

  --gold: var(--warn);
  --gold-ink: var(--ink);
  --gold-soft: var(--live-soft);
}

:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --font-display: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1500px;
  --measure: 66ch;

  /* motion (ECOSYSTEM_REDESIGN.md §9.4): no bounce or overshoot anywhere */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-instant: 120ms;
  --dur-quick: 200ms;
  --dur-panel: 320ms;
  --dur-reveal: 560ms;
  --dur-hero: 900ms;
  --stagger: 60ms;

  /* type scale (names kept from DESIGN_SYSTEM.md) */
  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-base: 0.875rem;  /* 14 */
  --text-md: 0.9375rem;   /* 15 */
  --text-lg: 1rem;        /* 16 */
  --text-xl: 1.125rem;    /* 18 */
  --text-2xl: 1.25rem;    /* 20 */
  --text-3xl: 1.5rem;     /* 24 */
  --text-4xl: 1.75rem;    /* 28 */
  --text-5xl: 2.25rem;    /* 36 */

  /* Public headings and leads match ezpzinvesting.com (src/styles/globals.css):
     display 44-72px, h1 36-56px, h2 28-40px, h3 20px, lead 17px, -0.022em on
     headings and -0.011em on body. The app keeps its compact scale (.is-app below). */
  --text-display: clamp(2.75rem, 6vw, 4.5rem);
  --text-h1: clamp(2.25rem, 4.6vw, 3.5rem);
  --text-h2: clamp(1.75rem, 3.6vw, 2.5rem);
  --text-h3: 1.25rem;
  --text-lead: 1.0625rem;
  --tracking-tight: -0.022em;
  --tracking-body: -0.011em;

  /* weights, tuned for Inter's variable axis */
  --weight-normal: 400;
  --weight-medium: 510;
  --weight-semi: 590;
  --weight-bold: 680;

  --leading-none: 1;
  --leading-tight: 1.08;
  --leading-heading: 1.25;
  --leading-snug: 1.4;
  --leading-relaxed: 1.5;
  --leading-normal: 1.6;
  --leading-loose: 1.7;

  /* spacing, 4px grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;

  /* controls */
  --control-sm: 32px;
  --control-md: 36px;
  --control-lg: 44px;

  /* page rhythm */
  --gutter: clamp(1rem, 2vw, 1.5rem);
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --section-y-tight: clamp(2.5rem, 5vw, 4rem);

  /* shell */
  --sidebar-w: 232px;
  --rail-w: 64px;
  --topbar-h: 64px;
  --header-h: 64px;

  /* layers */
  --z-sticky: 20;
  --z-topbar: 40;
  --z-header: 60;
  --z-scrim: 70;
  --z-drawer: 80;
  --z-popover: 90;
  --z-modal: 100;
  --z-toast: 150;
  --z-skip: 200;
  --z-tooltip: 300;
  /* Breakpoints (docs only): 480 · 640 · 900 (drawer; nav.js uses 901) · 1280 · 1536 */
}

@media (max-width: 640px) {
  :root { --section-y: clamp(3rem, 11vw, 4.5rem); }
}

/* App: compact type for data screens. */
:root.is-app {
  --text-display: clamp(2.4rem, 5vw, 3.6rem);
  --text-h1: clamp(1.9rem, 3.4vw, 2.6rem);
  --text-h2: clamp(1.6rem, 3vw, 2.1rem);
  --text-h3: var(--text-xl);
  --text-lead: var(--text-lg);
  --tracking-body: 0;
}

} /* @layer legacy */