/**
 * @zendir/ui — CSS Design Tokens
 *
 * SOURCE OF TRUTH — hand-maintained. Edit color/token values here.
 * `npm run build:tokens` reads this file and regenerates the typed name
 * constants in css-vars.ts (never the reverse). The scales here mirror the
 * primitive palettes in src/tokens/palettes/*.ts (the TypeScript source for
 * JS consumers and the ThemeProvider runtime); keep the two in sync by hand.
 *
 * Usage:
 *   @import '@zendir/ui/tokens/css';
 *   .my-component { background: var(--zendir-bg-surface); }
 */

:root {
  /* ============================================================
   * STATUS COLORS (Astro UX Compliant)
   * ============================================================ */
  --zendir-status-critical: #ff3838;
  --zendir-status-serious: #ffb302;
  --zendir-status-caution: #fce83a;
  --zendir-status-normal: #56f000;
  --zendir-status-standby: #2dccff;
  --zendir-status-off: #a4abb6;

  /* Light-theme status fill colors */
  --zendir-status-critical-light: #ff2a04;
  --zendir-status-serious-light: #ffaf3d;
  --zendir-status-caution-light: #fad800;
  --zendir-status-normal-light: #00e200;
  --zendir-status-standby-light: #64d9ff;
  --zendir-status-off-light: #7b8089;

  /* Light-theme status border colors */
  --zendir-status-critical-border: #661102;
  --zendir-status-serious-border: #664618;
  --zendir-status-caution-border: #645600;
  --zendir-status-normal-border: #005a00;
  --zendir-status-standby-border: #285766;
  --zendir-status-off-border: #3c3e42;

  /* ============================================================
   * SPACING
   * ============================================================ */
  --zendir-spacing-xs: 4px;
  --zendir-spacing-sm: 8px;
  --zendir-spacing-md: 16px;
  --zendir-spacing-lg: 24px;
  --zendir-spacing-xl: 32px;
  --zendir-spacing-xxl: 48px;

  /* ============================================================
   * BORDER RADIUS
   * ============================================================ */
  --zendir-radius-none: 0;
  --zendir-radius-sm: 2px;
  --zendir-radius-md: 4px;
  --zendir-radius-lg: 8px;
  --zendir-radius-xl: 16px;
  --zendir-radius-full: 9999px;

  /* ============================================================
   * TYPOGRAPHY
   * Public Sans leads body, Sora leads headings, Roboto is the
   * AstroUXDS-compliant fallback. OS-native fonts complete the chain.
   * @see https://www.astrouxds.com/foundations/typography/
   * ============================================================ */
  --zendir-font-primary:
    "Public Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --zendir-font-heading:
    "Sora", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --zendir-font-mono:
    "Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;

  /* Font sizes (rem-based, AstroUXDS scale) */
  --zendir-font-size-micro: 0.5625rem;
  --zendir-font-size-xxs: 0.625rem;
  --zendir-font-size-xs: 0.75rem;
  --zendir-font-size-sm: 0.875rem;
  --zendir-font-size-base: 1rem;
  --zendir-font-size-md: 1.125rem;
  --zendir-font-size-lg: 1.25rem;
  --zendir-font-size-xl: 1.5rem;
  --zendir-font-size-xxl: 2.125rem;
  --zendir-font-size-xxxl: 3rem;
  --zendir-font-size-display: 3.75rem;

  /* Font weights — AstroUXDS supports only 300/400/500/700 */
  --zendir-font-weight-light: 300;
  --zendir-font-weight-normal: 400;
  --zendir-font-weight-medium: 500;
  --zendir-font-weight-semibold: 500;
  --zendir-font-weight-bold: 700;

  /* Line heights */
  --zendir-line-height-tight: 1.25;
  --zendir-line-height-normal: 1.5;
  --zendir-line-height-relaxed: 1.75;

  /* ============================================================
   * SHADOWS
   * ============================================================ */
  --zendir-shadow-none: none;
  --zendir-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --zendir-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --zendir-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.3);
  --zendir-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
  --zendir-shadow-glow: 0 0 20px rgba(77, 172, 255, 0.4);

  /* ============================================================
   * ANIMATION
   * ============================================================ */
  --zendir-animation-fast: 150ms ease;
  --zendir-animation-normal: 250ms ease;
  --zendir-animation-slow: 400ms ease;
}

/* ============================================================
 * PRIMITIVE PALETTES (Layer 0 — src/tokens/palettes)
 * Raw scales; prefer the semantic tokens above for UI surfaces.
 * ============================================================ */
:root {
  /* Zendir Colour System */
  --zendir-eb-50: #eef2ff;
  --zendir-eb-100: #e0e7ff;
  --zendir-eb-200: #c4d2ff;
  --zendir-eb-300: #9eb4ff;
  --zendir-eb-400: #6f89ff;
  --zendir-eb-500: #5061ff;
  --zendir-eb-600: #3e3cff;
  --zendir-eb-700: #352edf;
  --zendir-eb-800: #2a2bb2;
  --zendir-eb-900: #252e8a;
  --zendir-eb-950: #151c50;
  --zendir-pb-50: #eef2ff;
  --zendir-pb-100: #dee7fe;
  --zendir-pb-200: #c3d4fe;
  --zendir-pb-300: #9bb6ff;
  --zendir-pb-400: #698eff;
  --zendir-pb-500: #466afc;
  --zendir-pb-600: #2f4af0;
  --zendir-pb-700: #263dd3;
  --zendir-pb-800: #1b2da0;
  --zendir-pb-900: #192b7a;
  --zendir-pb-950: #0d1945;
  --zendir-uv-50: #f5f3fd;
  --zendir-uv-100: #eae6fa;
  --zendir-uv-200: #d8cff9;
  --zendir-uv-300: #c6b4ff;
  --zendir-uv-400: #9d70ff;
  --zendir-uv-500: #8744f3;
  --zendir-uv-600: #7515e2;
  --zendir-uv-700: #6600cd;
  --zendir-uv-800: #5400ab;
  --zendir-uv-900: #421182;
  --zendir-uv-950: #251048;
  --zendir-neutral-50: #f6f7fd;
  --zendir-neutral-100: #edf2fc;
  --zendir-neutral-200: #dde5f4;
  --zendir-neutral-300: #c8d1e6;
  --zendir-neutral-400: #8899bc;
  --zendir-neutral-500: #596b8e;
  --zendir-neutral-600: #445272;
  --zendir-neutral-700: #303c58;
  --zendir-neutral-800: #1b243d;
  --zendir-neutral-900: #0d1429;
  --zendir-neutral-950: #030414;

  /* Astro UXDS status ramps */
  --zendir-astro-red-400: #ff5f60;
  --zendir-astro-red-500: #ff3838;
  --zendir-astro-red-600: #ff2a04;
  --zendir-astro-red-700: #c8102e;
  --zendir-astro-red-800: #8b1703;
  --zendir-astro-red-900: #661102;
  --zendir-astro-amber-400: #ffcc57;
  --zendir-astro-amber-500: #ffb302;
  --zendir-astro-amber-600: #ffaf3d;
  --zendir-astro-amber-700: #ff8c00;
  --zendir-astro-amber-800: #975f0e;
  --zendir-astro-amber-900: #664618;
  --zendir-astro-yellow-400: #fded61;
  --zendir-astro-yellow-500: #fce83a;
  --zendir-astro-yellow-600: #fad800;
  --zendir-astro-yellow-700: #c7ab00;
  --zendir-astro-yellow-800: #917d01;
  --zendir-astro-yellow-900: #645600;
  --zendir-astro-green-400: #99f666;
  --zendir-astro-green-500: #56f000;
  --zendir-astro-green-600: #00e200;
  --zendir-astro-green-700: #00ad23;
  --zendir-astro-green-800: #007a33;
  --zendir-astro-green-900: #005a00;
  --zendir-astro-cyan-400: #5ce2ff;
  --zendir-astro-cyan-500: #64d9ff;
  --zendir-astro-cyan-600: #2dccff;
  --zendir-astro-cyan-700: #20a9d5;
  --zendir-astro-cyan-800: #35798e;
  --zendir-astro-cyan-900: #285766;

  /* Tailwind CSS v4.2 */
  --zendir-tw-red-50: #fef2f2;
  --zendir-tw-red-100: #ffe2e2;
  --zendir-tw-red-200: #ffcaca;
  --zendir-tw-red-300: #ffa3a4;
  --zendir-tw-red-400: #ff6568;
  --zendir-tw-red-500: #fb2c36;
  --zendir-tw-red-600: #e40016;
  --zendir-tw-red-700: #bf000f;
  --zendir-tw-red-800: #9f0712;
  --zendir-tw-red-900: #82181a;
  --zendir-tw-red-950: #460809;
  --zendir-tw-orange-50: #fff7ed;
  --zendir-tw-orange-100: #ffedd5;
  --zendir-tw-orange-200: #ffd7a8;
  --zendir-tw-orange-300: #ffb970;
  --zendir-tw-orange-400: #ff8b1f;
  --zendir-tw-orange-500: #fc7100;
  --zendir-tw-orange-600: #ec5600;
  --zendir-tw-orange-700: #c43e00;
  --zendir-tw-orange-800: #9f2d00;
  --zendir-tw-orange-900: #7e2a0c;
  --zendir-tw-orange-950: #441306;
  --zendir-tw-yellow-50: #fefce8;
  --zendir-tw-yellow-100: #fef9c2;
  --zendir-tw-yellow-200: #fff085;
  --zendir-tw-yellow-300: #ffe030;
  --zendir-tw-yellow-400: #f7c900;
  --zendir-tw-yellow-500: #eab300;
  --zendir-tw-yellow-600: #ca8a00;
  --zendir-tw-yellow-700: #a26200;
  --zendir-tw-yellow-800: #874c00;
  --zendir-tw-yellow-900: #733e0a;
  --zendir-tw-yellow-950: #432004;
  --zendir-tw-green-50: #f0fdf4;
  --zendir-tw-green-100: #dcfce7;
  --zendir-tw-green-200: #b9f8cf;
  --zendir-tw-green-300: #7bf1a8;
  --zendir-tw-green-400: #05df72;
  --zendir-tw-green-500: #00c65a;
  --zendir-tw-green-600: #00a447;
  --zendir-tw-green-700: #00813a;
  --zendir-tw-green-800: #016630;
  --zendir-tw-green-900: #0d542b;
  --zendir-tw-green-950: #032e15;
  --zendir-tw-sky-50: #f0f9ff;
  --zendir-tw-sky-100: #dff2fe;
  --zendir-tw-sky-200: #b8e6fe;
  --zendir-tw-sky-300: #78d4ff;
  --zendir-tw-sky-400: #00bbfd;
  --zendir-tw-sky-500: #00a5ea;
  --zendir-tw-sky-600: #0084c7;
  --zendir-tw-sky-700: #0069a2;
  --zendir-tw-sky-800: #005986;
  --zendir-tw-sky-900: #024a70;
  --zendir-tw-sky-950: #052f4a;
  --zendir-tw-blue-50: #eff6ff;
  --zendir-tw-blue-100: #dbeafe;
  --zendir-tw-blue-200: #bedbff;
  --zendir-tw-blue-300: #91c5ff;
  --zendir-tw-blue-400: #56a2ff;
  --zendir-tw-blue-500: #3280ff;
  --zendir-tw-blue-600: #155dfc;
  --zendir-tw-blue-700: #1447e6;
  --zendir-tw-blue-800: #193cb8;
  --zendir-tw-blue-900: #1c398e;
  --zendir-tw-blue-950: #162456;
  --zendir-tw-indigo-50: #eef2ff;
  --zendir-tw-indigo-100: #e0e7ff;
  --zendir-tw-indigo-200: #c7d2ff;
  --zendir-tw-indigo-300: #a4b4ff;
  --zendir-tw-indigo-400: #7d87ff;
  --zendir-tw-indigo-500: #6260ff;
  --zendir-tw-indigo-600: #4f39f6;
  --zendir-tw-indigo-700: #432dd7;
  --zendir-tw-indigo-800: #372aac;
  --zendir-tw-indigo-900: #312c85;
  --zendir-tw-indigo-950: #1e1a4d;
  --zendir-tw-purple-50: #faf5ff;
  --zendir-tw-purple-100: #f3e8ff;
  --zendir-tw-purple-200: #e9d5ff;
  --zendir-tw-purple-300: #d8b4ff;
  --zendir-tw-purple-400: #bf7eff;
  --zendir-tw-purple-500: #ab4eff;
  --zendir-tw-purple-600: #9810fa;
  --zendir-tw-purple-700: #8200d9;
  --zendir-tw-purple-800: #6e11b0;
  --zendir-tw-purple-900: #59168b;
  --zendir-tw-purple-950: #3c0366;
  --zendir-tw-pink-50: #fdf2f8;
  --zendir-tw-pink-100: #fce7f3;
  --zendir-tw-pink-200: #fccee8;
  --zendir-tw-pink-300: #fda5d5;
  --zendir-tw-pink-400: #fb64b6;
  --zendir-tw-pink-500: #f6339a;
  --zendir-tw-pink-600: #e30076;
  --zendir-tw-pink-700: #c2005c;
  --zendir-tw-pink-800: #a2004c;
  --zendir-tw-pink-900: #861043;
  --zendir-tw-pink-950: #510424;
  --zendir-tw-rose-50: #fff1f2;
  --zendir-tw-rose-100: #ffe4e6;
  --zendir-tw-rose-200: #ffccd3;
  --zendir-tw-rose-300: #ffa3ae;
  --zendir-tw-rose-400: #ff6880;
  --zendir-tw-rose-500: #ff2357;
  --zendir-tw-rose-600: #e60045;
  --zendir-tw-rose-700: #c1003a;
  --zendir-tw-rose-800: #a30037;
  --zendir-tw-rose-900: #8b0836;
  --zendir-tw-rose-950: #4d0218;
  --zendir-tw-slate-50: #f8fafc;
  --zendir-tw-slate-100: #f1f5f9;
  --zendir-tw-slate-200: #e2e8f0;
  --zendir-tw-slate-300: #cad5e2;
  --zendir-tw-slate-400: #90a1b9;
  --zendir-tw-slate-500: #62748e;
  --zendir-tw-slate-600: #45556c;
  --zendir-tw-slate-700: #314158;
  --zendir-tw-slate-800: #1d293d;
  --zendir-tw-slate-900: #0f172b;
  --zendir-tw-slate-950: #020618;
  --zendir-tw-neutral-50: #fafafa;
  --zendir-tw-neutral-100: #f5f5f5;
  --zendir-tw-neutral-200: #e5e5e5;
  --zendir-tw-neutral-300: #d4d4d4;
  --zendir-tw-neutral-400: #a1a1a1;
  --zendir-tw-neutral-500: #737373;
  --zendir-tw-neutral-600: #525252;
  --zendir-tw-neutral-700: #404040;
  --zendir-tw-neutral-800: #262626;
  --zendir-tw-neutral-900: #171717;
  --zendir-tw-neutral-950: #0a0a0a;
}

/* ============================================================
 * ZEN (HYBRID) THEME (default)
 * ============================================================ */
:root,
[data-theme="hybrid"],
[data-theme="dark"] {
  --zendir-bg-base: #09090b;
  --zendir-bg-surface: rgba(24, 24, 27, 0.98);
  --zendir-bg-elevated: rgba(39, 39, 42, 0.98);
  --zendir-bg-overlay: rgba(0, 0, 0, 0.85);

  --zendir-text-primary: #ffffff;
  --zendir-text-secondary: #a1a1aa;
  --zendir-text-tertiary: #8e8e96;
  --zendir-text-muted: #8e8e96;

  --zendir-border-default: rgba(139, 92, 246, 0.3);
  --zendir-border-muted: rgba(63, 63, 70, 0.5);
  --zendir-border-focus: #8b5cf6;

  --zendir-accent-primary: #8b5cf6;
  --zendir-accent-secondary: #a78bfa;
  --zendir-accent-tertiary: #7c3aed;

  --zendir-semantic-success: #56f000;
  --zendir-semantic-warning: #fce83a;
  --zendir-semantic-error: #ff3838;
  --zendir-semantic-info: #8b5cf6;
}

/* ============================================================
 * ASTRO THEME
 * ============================================================ */
[data-theme="astro"] {
  --zendir-bg-base: #101923;
  --zendir-bg-surface: #1b2d3e;
  --zendir-bg-elevated: #243b53;
  --zendir-bg-overlay: rgba(16, 25, 35, 0.95);

  --zendir-text-primary: #ffffff;
  --zendir-text-secondary: #b7c5d3;
  --zendir-text-tertiary: #8fa4b7;
  --zendir-text-muted: #8fa4b7;

  --zendir-border-default: #2b659b;
  --zendir-border-muted: #172635;
  --zendir-border-focus: #4dacff;

  --zendir-accent-primary: #4dacff;
  --zendir-accent-secondary: #56f000;
  --zendir-accent-tertiary: #a371f7;

  --zendir-semantic-success: #56f000;
  --zendir-semantic-warning: #fce83a;
  --zendir-semantic-error: #ff3838;
  --zendir-semantic-info: #4dacff;
}

[data-theme="astro"][data-mode="light"],
[data-theme="hybrid"][data-mode="light"],
[data-theme="nebula"][data-mode="light"],
[data-theme="purple-hue"][data-mode="light"],
[data-theme="light"] {
  --zendir-bg-base: #eaeef4;
  --zendir-bg-surface: #f5f8fc;
  --zendir-bg-elevated: #ffffff;
  --zendir-bg-overlay: rgba(234, 238, 244, 0.95);

  --zendir-text-primary: #1b2d3e;
  --zendir-text-secondary: #51667c;
  --zendir-text-tertiary: #556a7c;
  --zendir-text-muted: #556a7c;

  --zendir-border-default: #2b659b;
  --zendir-border-muted: #d1d5db;
  --zendir-border-focus: #0066cc;

  --zendir-accent-primary: #0066cc;
  --zendir-accent-secondary: #56f000;
  --zendir-accent-tertiary: #7c3aed;

  --zendir-semantic-success: #56f000;
  --zendir-semantic-warning: #fce83a;
  --zendir-semantic-error: #ff3838;
  --zendir-semantic-info: #4dacff;
}

/* ============================================================
 * NEBULA THEME
 * ============================================================ */
[data-theme="nebula"] {
  --zendir-bg-base: #070a18;
  --zendir-bg-surface: #0d1429;
  --zendir-bg-elevated: #121b36;
  --zendir-bg-overlay: rgba(7, 10, 24, 0.9);

  --zendir-text-primary: #f6f7fd;
  --zendir-text-secondary: #c8d1e6;
  --zendir-text-tertiary: #8899bc;
  --zendir-text-muted: #596b8e;

  --zendir-border-default: #1b243d;
  --zendir-border-muted: #121b36;
  --zendir-border-focus: #8744f3;

  --zendir-accent-primary: #8744f3;
  --zendir-accent-secondary: #9d70ff;
  --zendir-accent-tertiary: #7515e2;

  --zendir-semantic-success: #00c65a;
  --zendir-semantic-warning: #eab300;
  --zendir-semantic-error: #fb2c36;
  --zendir-semantic-info: #5061ff;
}

/* ============================================================
 * PURPLE HUE THEME
 * ============================================================ */
[data-theme="purple-hue"] {
  --zendir-bg-base: #0a0a0f;
  --zendir-bg-surface: rgba(18, 18, 28, 0.98);
  --zendir-bg-elevated: rgba(28, 28, 42, 0.98);
  --zendir-bg-overlay: rgba(0, 0, 0, 0.9);

  --zendir-text-primary: #fafafa;
  --zendir-text-secondary: #a1a1aa;
  --zendir-text-tertiary: #8e8e96;
  --zendir-text-muted: #8e8e96;

  --zendir-border-default: rgba(139, 92, 246, 0.25);
  --zendir-border-muted: rgba(55, 48, 82, 0.5);
  --zendir-border-focus: #8b5cf6;

  --zendir-accent-primary: #8b5cf6;
  --zendir-accent-secondary: #a78bfa;
  --zendir-accent-tertiary: #7c3aed;

  --zendir-semantic-success: #56f000;
  --zendir-semantic-warning: #fce83a;
  --zendir-semantic-error: #ff3838;
  --zendir-semantic-info: #a78bfa;
}

/* ============================================================
 * TRANSPARENT THEMES
 * ============================================================ */
[data-theme="transparent"],
[data-theme="transparent-bold"] {
  --zendir-bg-base: rgba(8, 12, 20, 0.95);
  --zendir-bg-surface: rgba(15, 20, 35, 0.85);
  --zendir-bg-elevated: rgba(25, 35, 55, 0.8);
  --zendir-bg-overlay: rgba(0, 0, 0, 0.75);

  --zendir-text-primary: #f0f4f8;
  --zendir-text-secondary: #94a3b8;
  --zendir-text-tertiary: #7b8da1;
  --zendir-text-muted: #7b8da1;

  --zendir-border-default: rgba(139, 92, 246, 0.25);
  --zendir-border-muted: rgba(139, 92, 246, 0.15);
  --zendir-border-focus: #8b5cf6;

  --zendir-accent-primary: #8b5cf6;
  --zendir-accent-secondary: #a78bfa;
  --zendir-accent-tertiary: #7c3aed;

  --zendir-semantic-success: #56f000;
  --zendir-semantic-warning: #fce83a;
  --zendir-semantic-error: #ff3838;
  --zendir-semantic-info: #8b5cf6;
}

[data-theme="transparent-minimal"] {
  --zendir-bg-base: rgba(8, 12, 20, 0.95);
  --zendir-bg-surface: rgba(15, 20, 35, 0.85);
  --zendir-bg-elevated: rgba(25, 35, 55, 0.8);
  --zendir-bg-overlay: rgba(0, 0, 0, 0.75);

  --zendir-text-primary: #f0f4f8;
  --zendir-text-secondary: #94a3b8;
  --zendir-text-tertiary: #7b8da1;
  --zendir-text-muted: #7b8da1;

  --zendir-border-default: rgba(139, 92, 246, 0.25);
  --zendir-border-muted: rgba(139, 92, 246, 0.15);
  --zendir-border-focus: #8b5cf6;

  --zendir-accent-primary: #8b5cf6;
  --zendir-accent-secondary: #a78bfa;
  --zendir-accent-tertiary: #7c3aed;

  --zendir-semantic-success: #56f000;
  --zendir-semantic-warning: #fce83a;
  --zendir-semantic-error: #ff3838;
  --zendir-semantic-info: #8b5cf6;
}