/* ==========================================================================
   ASTRYX TOKEN LAYER — CVC Phase 1 (JOE-2828)
   --------------------------------------------------------------------------
   Source: @astryxdesign/core 0.1.4 (Meta Open Source, MIT)
           dist/astryx.css — compiled public theme tokens only.
   Extracted: 2026-08-30. Re-extract on kit version bump:
     powershell: see docs/ASTRYX-PILOT-PLAN.md "Sync" section.

   RULES (do not break):
   - Only PUBLIC tokens live here (--color-*, --spacing-*, --radius-* ...).
     StyleX compiler internals (--x-*, --x---*) are NEVER ported.
   - This file is PILOT-ONLY: no live page links it until Joe calls the swap
     (DESIGN-LOCK canonical = 6eea2a0a).
   - CVC's own variables (styles.css :root) are NOT redefined here.
     The bridge section defines NEW --cvc-x-* references only.
   - light-dark() resolves via color-scheme; CVC is light-only today —
     pin an island to light with: .island-light { color-scheme: light; }
   ========================================================================== */

:root { color-scheme: light dark; }

/* --- Base --- */
:root {
  --border-width: 1px;
}

/* --- Colour: semantic (light / dark via light-dark()) --- */
:root {
  --color-accent: light-dark(#0064E0, #2694FE);
  --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-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, #FFFFFF);
  --color-warning: light-dark(#E9AF08, #F2C00B);
  --color-warning-muted: light-dark(#E2A40033, #E2A4003F);
  --color-on-warning: light-dark(#0A1317, #0A1317);
  --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);
}

/* --- Colour: hue families (11) — chips, badges, category tags --- */
:root {
  --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);
}

/* --- Motion --- */
:root {
  --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;
  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
}

/* --- Typography --- */
:root {
  --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-code: "SF Mono", Monaco, Consolas, monospace;
  --font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --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-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* --- Type presets --- */
:root {
  --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;
}

/* --- Radius --- */
:root {
  --radius-none: 0px;
  --radius-inner: 4px;
  --radius-element: 8px;
  --radius-container: 12px;
  --radius-page: 28px;
  --radius-chat: 28px;
  --radius-full: 9999px;
}

/* --- Shadow --- */
:root {
  --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);
}

/* --- Element sizes --- */
:root {
  --size-element-sm: 28px;
  --size-element-md: 32px;
  --size-element-lg: 36px;
}

/* --- Spacing scale --- */
:root {
  --spacing-0: 0px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
}

/* ==========================================================================
   CVC BRIDGE — Astryx tokens expressed through CVC's design language.
   NEW --cvc-x-* variables only. CVC's own vars (styles.css :root, 41 of
   them: --bg --canvas --panel --ink --rose --r --f ...) stay untouched.
   Islands use these so kit components read CVC's palette, not Astryx's
   default blue. When Joe calls the design swap, the bridge direction can
   invert (CVC vars defined FROM tokens) — that decision is his, not ours.
   ========================================================================== */
:root {
  /* Surfaces — CVC's paper/canvas world */
  --cvc-x-body: #F6F8FA;              /* CVC canvas, stays CVC */
  --cvc-x-surface: var(--white, #FFFFFF); /* falls back to CVC --white when loaded together */
  --cvc-x-surface-semantic: var(--color-background-surface);

  /* Text — CVC's ink hierarchy */
  --cvc-x-ink-primary: #0C1B33;       /* CVC --ink value, stays CVC */
  --cvc-x-ink-secondary: var(--ink-soft, #47546B);

  /* Brand accent — CVC blue, NOT Astryx #0064E0. Islands override
     --color-accent with this inside their mount root. */
  --cvc-x-accent: var(--accent, #0B5FA5);
  --cvc-x-accent-hover: var(--accent-hover, #094C88);

  /* Status */
  --cvc-x-positive: var(--positive, #147A46);
  --cvc-x-rose: var(--rose, #C0273D);

  /* Radius — CVC radii are the island contract */
  --cvc-x-radius-element: var(--r, 10px);
  --cvc-x-radius-container: var(--r-card, 14px);
  --cvc-x-radius-chip: var(--r-chip, 9999px);

  /* Shadows — CVC elevations win for in-shell islands */
  --cvc-x-shadow-rest: var(--shadow-rest, 0 1px 2px rgba(12, 27, 51, 0.06));
  --cvc-x-shadow-hover: var(--shadow-hover, 0 4px 12px rgba(12, 27, 51, 0.10));
  --cvc-x-shadow-pop: var(--shadow-pop, 0 12px 32px rgba(12, 27, 51, 0.16));

  /* Type — Inter is the CVC+Kyber shared face; wins over Astryx system stack */
  --cvc-x-font: var(--f, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* Island theme scope — apply to the React island's mount element.
   Kit components then render in CVC's palette while keeping the
   kit's spacing/type/radius/motion scales. */
.cvc-island {
  --color-accent: var(--cvc-x-accent);
  --color-accent-muted: rgba(11, 95, 165, 0.12);
  --color-on-accent: #FFFFFF;
  --color-background-surface: #FFFFFF;
  --color-background-body: var(--cvc-x-body);
  --color-text-primary: var(--cvc-x-ink-primary);
  --color-text-secondary: var(--cvc-x-ink-secondary);
  --color-border: rgba(12, 27, 51, 0.12);
  --color-border-emphasized: #C9D2E0;
  --radius-element: var(--cvc-x-radius-element);
  --radius-container: var(--cvc-x-radius-container);
  --shadow-low: var(--cvc-x-shadow-rest);
  --shadow-med: var(--cvc-x-shadow-hover);
  --shadow-high: var(--cvc-x-shadow-pop);
  --font-family-body: var(--cvc-x-font);
  --font-family-heading: var(--cvc-x-font);
  color-scheme: light; /* pin: CVC has no dark mode */
}