/* ==========================================================================
   Astryx tokens — ported from Astryx 0.7.12, MIT, Meta Platforms.
   Source (read-only clone): packages/core/src/theme/tokens.stylex.ts
   (clone HEAD 0840fcc). 211 variables, hand-emitted as plain :root CSS
   (no React, no StyleX, no theme build step — SHIP.md §7 step 2b).

   Brand overrides (DESIGN.md §1, deliberate — not inherited by accident):
     - Accent: #0064E0 / #0171E3 (Astryx Neutral blue, core value).
     - Fonts: Manrope kept (headings + body); DM Sans dropped;
       Figtree (Astryx Neutral default) NOT adopted.
     - Neutrals: warm grays — body #F1F4F7, surface #FFFFFF,
       text primary #0A1317 (core values).
     - Radius: element 8px, container 12px, page 28px (core values).
   Neutral-theme palette overrides NOT applied: DESIGN §1 pins the
   core values above, and SHIP.md §6.1 (verification baseline)
   quotes the core values. The Neutral theme's near-black accent
   (#1b1b1b) is expressly rejected by §1.
   Dark mode DEFERRED (DESIGN §1): tokens keep light-dark() pairs so
   dark mode can switch on later; v1 ships light only
   (html carries data-theme="light").
   ========================================================================== */

@layer astryx-theme;

:root {
  /* Colour (98) — colorDefaults */
  --color-accent: light-dark(#0064E0, #0171E3);
  --color-accent-muted: light-dark(#0082FB33, #0082FB3F);
  --color-on-accent: light-dark(#FFFFFF, #FFFFFF);
  --color-neutral: light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2));
  --color-background-surface: light-dark(#FFFFFF, #1F1F22);
  --color-background-body: light-dark(#F1F4F7, #111112);
  --color-overlay: light-dark(#01122866, #11111299);
  --color-overlay-hover: light-dark(#0536590C, #FFFFFF0C);
  --color-overlay-pressed: light-dark(#05365919, #FFFFFF19);
  --color-background-muted: light-dark(#0536590C, #1111127F);
  --color-text-primary: light-dark(#0A1317, #DFE2E5);
  --color-text-secondary: light-dark(#4E606F, #AAAFB5);
  --color-text-disabled: light-dark(#A4B0BC, #6F747C);
  --color-text-accent: light-dark(#0064E0, #3E9EFB);
  --color-on-dark: light-dark(#FFFFFF, #FFFFFF);
  --color-on-light: light-dark(#000000, #000000);
  --color-icon-accent: light-dark(#0064E0, #2694FE);
  --color-icon-primary: light-dark(#0A1317, #DFE2E5);
  --color-icon-secondary: light-dark(#4E606F, #AAAFB5);
  --color-icon-disabled: light-dark(#A4B0BC, #6F747C);
  --color-background-card: light-dark(#FFFFFF, #1F1F22);
  --color-background-popover: light-dark(#FFFFFF, #28292C);
  --color-background-inverted: light-dark(#0A1317, #FFFFFF);
  --color-background-error-inverted: light-dark(#AA071E, #E3193B);
  --color-info: light-dark(#0064E0, #0064E0);
  --color-info-muted: light-dark(#0082FB33, #0082FB3F);
  --color-on-info: light-dark(#FFFFFF, #FFFFFF);
  --color-success: light-dark(#0D8626, #0D8626);
  --color-success-muted: light-dark(#0B991F33, #0B991F3F);
  --color-on-success: light-dark(#FFFFFF, #FFFFFF);
  --color-error: light-dark(#E3193B, #F5394F);
  --color-error-muted: light-dark(#E3193B33, #F5394F3F);
  --color-on-error: light-dark(#FFFFFF, #0A1317);
  --color-warning: light-dark(#E9AF08, #F2C00B);
  --color-warning-muted: light-dark(#E2A40033, #E2A4003F);
  --color-on-warning: light-dark(#0A1317, #0A1317);
  --color-text-info: var(--color-text-blue);
  --color-text-success: var(--color-text-green);
  --color-text-warning: var(--color-text-yellow);
  --color-text-error: var(--color-text-red);
  --color-icon-info: var(--color-text-info);
  --color-icon-success: var(--color-text-success);
  --color-icon-warning: var(--color-text-warning);
  --color-icon-error: var(--color-text-error);
  --color-border-info: var(--color-text-info);
  --color-border-success: var(--color-text-success);
  --color-border-warning: var(--color-text-warning);
  --color-border-error: var(--color-text-error);
  --color-on-info-muted: var(--color-text-blue);
  --color-on-success-muted: var(--color-text-green);
  --color-on-warning-muted: var(--color-text-yellow);
  --color-on-error-muted: var(--color-text-red);
  --color-border: light-dark(#05365919, #F2F4F619);
  --color-border-emphasized: light-dark(#CCD3DB, #494D53);
  --color-skeleton: light-dark(#CCD3DB, #5A5E66);
  --color-track: light-dark(#CCD3DB, #5A5E66);
  --color-shadow: light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3));
  --color-tint-hover: light-dark(black, white);
  --color-background-blue: light-dark(#0171E333, #0171E333);
  --color-border-blue: light-dark(#0064E0, #2694FE);
  --color-icon-blue: light-dark(#0064E0, #2694FE);
  --color-text-blue: light-dark(#042F97, #AFD7FF);
  --color-background-cyan: light-dark(#03A7D733, #03A7D733);
  --color-border-cyan: light-dark(#089DD0, #0171A4);
  --color-icon-cyan: light-dark(#00ACC1, #26C6DA);
  --color-text-cyan: light-dark(#014975, #A1EEF9);
  --color-background-gray: light-dark(#0A131733, #666A724C);
  --color-border-gray: light-dark(#647685, #748695);
  --color-icon-gray: light-dark(#4E606F, #AAAFB5);
  --color-text-gray: light-dark(#0A1317, #E7EAED);
  --color-background-green: light-dark(#24BB5E33, #24BB5E33);
  --color-border-green: light-dark(#0D8626, #0B991F);
  --color-icon-green: light-dark(#0D8626, #26A756);
  --color-text-green: light-dark(#09441F, #A5F690);
  --color-background-orange: light-dark(#F2790233, #F2790233);
  --color-border-orange: light-dark(#EB6E00, #B34A01);
  --color-icon-orange: light-dark(#E9690B, #FB8C00);
  --color-text-orange: light-dark(#6B2203, #FDB876);
  --color-background-pink: light-dark(#E638B333, #E638B333);
  --color-border-pink: light-dark(#F351C0, #C02294);
  --color-icon-pink: light-dark(#C2185B, #EC407A);
  --color-text-pink: light-dark(#650053, #FEADE3);
  --color-background-purple: light-dark(#7952FF33, #7952FF33);
  --color-border-purple: light-dark(#9081FF, #7340FE);
  --color-icon-purple: light-dark(#5B08D8, #7952FF);
  --color-text-purple: light-dark(#3E0697, #B3B0FE);
  --color-background-red: light-dark(#E3193B33, #E3193B33);
  --color-border-red: light-dark(#E3193B, #F5394F);
  --color-icon-red: light-dark(#D31130, #E3193B);
  --color-text-red: light-dark(#7B0210, #FFB2B8);
  --color-background-teal: light-dark(#0DB7AF33, #0DB7AF33);
  --color-border-teal: light-dark(#08A3A3, #08767D);
  --color-icon-teal: light-dark(#009688, #26A69A);
  --color-text-teal: light-dark(#083943, #40DCCD);
  --color-background-yellow: light-dark(#E2A40033, #E2A40033);
  --color-border-yellow: light-dark(#C58600, #B47700);
  --color-icon-yellow: light-dark(#FBC02D, #FFEE58);
  --color-text-yellow: light-dark(#753F07, #FBCE03);

  /* Spacing (15) — spacingDefaults */
  --spacing-0: 0rem;
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1-5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;

  /* Size (3) — sizeDefaults */
  --size-element-sm: 28px;
  --size-element-md: 32px;
  --size-element-lg: 36px;

  /* Border (1) — borderDefaults */
  --border-width: 1px;

  /* Focus (4) — focusDefaults */
  --focus-outline-width: 2px;
  --focus-outline-style: solid;
  --focus-outline-color: var(--color-accent);
  --focus-outline-offset: 3px;

  /* Radius (7) — radiusDefaults */
  --radius-none: 0px;
  --radius-inner: 4px;
  --radius-element: 8px;
  --radius-container: 12px;
  --radius-page: 28px;
  --radius-chat: 28px;
  --radius-full: 9999px;

  /* Shadow (8) — shadowDefaults */
  --shadow-low: 0px 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  --shadow-med: 0px 1px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  --shadow-high: 0px 2px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 8px 24px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  --shadow-inset-hover: inset 0px 0px 0px 2px light-dark(rgba(5, 54, 89, 0.15), rgba(223, 226, 229, 0.2));
  --shadow-inset-selected: inset 0px 0px 0px 2px rgba(1, 113, 227, 0.5);
  --shadow-inset-success: inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3);
  --shadow-inset-warning: inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3);
  --shadow-inset-error: inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3);

  /* Duration (10) — durationDefaults */
  --duration-fast-min: 130ms;
  --duration-fast: 175ms;
  --duration-fast-max: 230ms;
  --duration-medium-min: 310ms;
  --duration-medium: 410ms;
  --duration-medium-max: 550ms;
  --duration-slow-min: 730ms;
  --duration-slow: 975ms;
  --duration-slow-max: 1300ms;
  --duration-exit: var(--duration-fast);

  /* Ease (4) — easeDefaults */
  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);
  --ease-entrance: cubic-bezier(0.24, 1, 0.4, 1);
  --ease-move: cubic-bezier(0.24, 1, 0.4, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.6, 0.6);

  /* Font families (3) — typographyDefaults */
  --font-family-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* brand override: Manrope (DESIGN.md §1) */
  --font-family-code: "SF Mono", Monaco, Consolas, monospace;
  --font-family-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* brand override: Manrope (DESIGN.md §1) */

  /* Font sizes (12) — textSizeDefaults */
  --font-size-4xs: 0.375rem;
  --font-size-3xs: 0.4375rem;
  --font-size-2xs: 0.5rem;
  --font-size-xs: 0.625rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.8125rem;
  --font-size-4xl: 2.1875rem;
  --font-size-5xl: 2.625rem;

  /* Font weights (4) — fontWeightDefaults */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Type scale (42) — typeScaleDefaults */
  --text-heading-1-size: var(--font-size-2xl);
  --text-heading-1-weight: var(--font-weight-semibold);
  --text-heading-1-leading: 1.3333;
  --text-heading-2-size: var(--font-size-xl);
  --text-heading-2-weight: var(--font-weight-semibold);
  --text-heading-2-leading: 1.4;
  --text-heading-3-size: var(--font-size-lg);
  --text-heading-3-weight: var(--font-weight-semibold);
  --text-heading-3-leading: 1.4118;
  --text-heading-4-size: var(--font-size-base);
  --text-heading-4-weight: var(--font-weight-semibold);
  --text-heading-4-leading: 1.4286;
  --text-heading-5-size: var(--font-size-sm);
  --text-heading-5-weight: var(--font-weight-semibold);
  --text-heading-5-leading: 1.6667;
  --text-heading-6-size: var(--font-size-xs);
  --text-heading-6-weight: var(--font-weight-semibold);
  --text-heading-6-leading: 1.6;
  --text-body-size: var(--font-size-base);
  --text-body-weight: var(--font-weight-normal);
  --text-body-leading: 1.4286;
  --text-large-size: var(--font-size-lg);
  --text-large-weight: var(--font-weight-semibold);
  --text-large-leading: 1.4118;
  --text-label-size: var(--font-size-base);
  --text-label-weight: var(--font-weight-medium);
  --text-label-leading: 1.4286;
  --text-code-size: var(--font-size-base);
  --text-code-weight: var(--font-weight-normal);
  --text-code-leading: 1.4286;
  --text-supporting-size: var(--font-size-sm);
  --text-supporting-weight: var(--font-weight-normal);
  --text-supporting-leading: 1.6667;
  --text-display-1-size: var(--font-size-5xl);
  --text-display-1-weight: var(--font-weight-normal);
  --text-display-1-leading: 1.2381;
  --text-display-2-size: var(--font-size-4xl);
  --text-display-2-weight: var(--font-weight-normal);
  --text-display-2-leading: 1.2571;
  --text-display-3-size: var(--font-size-3xl);
  --text-display-3-weight: var(--font-weight-normal);
  --text-display-3-leading: 1.2414;

  /* ---- Site aliases (single source of truth lives here) ---- */
  --ax-container: 1280px; /* DESIGN.md §1: single container width */
  --ax-accent-deep: #0053b3; /* darker accent for hover states */
  --ax-accent-soft: var(--color-accent-muted);
}

/* Light-only v1: resolve light-dark() to the light side and tell the
   browser native controls are light (reset.css maps data-theme). */
html[data-theme="light"] { color-scheme: light; }