/* ============================================================
   AIxcel Labs — Design Tokens  (css/tokens.css)
   Brand: Plasma Cyan  |  Token version: 1.0
   Source: assets/aixcel-branding-style-full/AIxcel-tokens.css
   ============================================================
   IMPORT ORDER (per plan.md §1.2):
     1. tokens.css   ← you are here
     2. reset.css
     3. main.css
     4. components.css
     5. css/pages/<page>.css
   ============================================================ */

/* Declare support for both color schemes at document root */
:root {
  /* Declare support for both color schemes at document root */
  color-scheme: light dark;

  /* ── BRAND PALETTE — PLASMA CYAN ── */
  --cyan-950: #020C12;
  --cyan-900: #071E2A;
  --cyan-800: #083344;
  --cyan-700: #0C4A6E;
  --cyan-600: #0369A1;
  --cyan-500: #0891B2;
  --cyan-400: #06B6D4;
  --cyan-300: #22D3EE;
  --cyan-200: #67E8F9;
  --cyan-100: #A5F3FC;
  --cyan-50:  #CFFAFE;
  --cyan-25:  #ECFEFF;

  /* ── NEUTRAL PALETTE — SLATE ── */
  --slate-950: #020617;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white:     #FFF;

  /* ── STATUS PALETTES ── */
  --green-900: #052E16;
  --green-700: #15803D;
  --green-500: #22C55E;
  --green-300: #86EFAC;
  --green-100: #DCFCE7;
  --green-50:  #F0FDF4;
  --amber-900: #451A03;
  --amber-700: #B45309;
  --amber-500: #F59E0B;
  --amber-300: #FCD34D;
  --amber-100: #FEF3C7;
  --amber-50:  #FFFBEB;
  --red-900:   #450A0A;
  --red-700:   #B91C1C;
  --red-500:   #EF4444;
  --red-300:   #FCA5A5;
  --red-100:   #FEE2E2;
  --red-50:    #FEF2F2;
  --blue-900:  #1E3A8A;
  --blue-700:  #1D4ED8;
  --blue-500:  #3B82F6;
  --blue-300:  #93C5FD;
  --blue-100:  #DBEAFE;
  --blue-50:   #EFF6FF;

  /* ── SEMANTIC — BACKGROUNDS ── */
  --bg-page:         var(--white);
  --bg-surface:      var(--slate-50);
  --bg-raised:       var(--white);
  --bg-overlay:      var(--slate-100);
  --bg-dark:         var(--cyan-900);
  --bg-dark-raised:  var(--cyan-800);
  --bg-brand:        var(--cyan-400);
  --bg-brand-subtle: var(--cyan-25);
  --bg-success:      var(--green-50);
  --bg-warning:      var(--amber-50);
  --bg-error:        var(--red-50);
  --bg-info:         var(--blue-50);

  /* ── SEMANTIC — TEXT ── */
  --text-primary:        var(--slate-900);
  --text-secondary:      var(--slate-600);
  --text-tertiary:       var(--slate-400);
  --text-disabled:       var(--slate-300);
  --text-inverse:        var(--white);
  --text-brand:          var(--cyan-600);
  --text-brand-strong:   var(--cyan-800);
  --text-on-dark:        var(--cyan-200);
  --text-on-dark-muted:  var(--cyan-300);
  --text-success:        var(--green-700);
  --text-warning:        var(--amber-700);
  --text-error:          var(--red-700);
  --text-info:           var(--blue-700);

  /* ── SEMANTIC — BORDERS ── */
  --border-subtle:   var(--slate-100);
  --border-default:  var(--slate-200);
  --border-strong:   var(--slate-300);
  --border-brand:    var(--cyan-400);
  --border-focus:    var(--cyan-500);
  --border-success:  var(--green-300);
  --border-warning:  var(--amber-300);
  --border-error:    var(--red-300);

  /* ── SPACING ── */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;   /*   2px */
  --space-1:   0.25rem;    /*   4px */
  --space-1-5: 0.375rem;   /*   6px */
  --space-2:   0.5rem;     /*   8px */
  --space-2-5: 0.625rem;   /*  10px */
  --space-3:   0.75rem;    /*  12px */
  --space-3-5: 0.875rem;   /*  14px */
  --space-4:   1rem;       /*  16px */
  --space-5:   1.25rem;    /*  20px */
  --space-6:   1.5rem;     /*  24px */
  --space-7:   1.75rem;    /*  28px */
  --space-8:   2rem;       /*  32px */
  --space-10:  2.5rem;     /*  40px */
  --space-12:  3rem;       /*  48px */
  --space-14:  3.5rem;     /*  56px */
  --space-16:  4rem;       /*  64px */
  --space-20:  5rem;       /*  80px */
  --space-24:  6rem;       /*  96px */
  --space-32:  8rem;       /* 128px */
  --space-40:  10rem;      /* 160px */
  --space-48:  12rem;      /* 192px */
  --space-64:  16rem;      /* 256px */

  /* ── TYPOGRAPHY ── */
  --font-sans: 'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Fluid type scale using clamp(min, preferred, max) */
  --text-xs:   clamp(0.69rem,  0.66rem + 0.18vw, 0.75rem);   /* ~11–12px */
  --text-sm:   clamp(0.83rem,  0.78rem + 0.29vw, 0.875rem);  /* ~13–14px */
  --text-base: 1rem;                                           /*     16px */
  --text-lg:   clamp(1.05rem,  0.95rem + 0.50vw, 1.125rem);  /* ~17–18px */
  --text-xl:   clamp(1.13rem,  0.95rem + 0.90vw, 1.25rem);   /* ~18–20px */
  --text-2xl:  clamp(1.25rem,  1rem + 1.25vw, 1.5rem);    /* ~20–24px */
  --text-3xl:  clamp(1.5rem,   1.1rem + 2.00vw, 1.875rem);  /* ~24–30px */
  --text-4xl:  clamp(1.8rem,   1.2rem + 3.00vw, 2.25rem);   /* ~29–36px */
  --text-5xl:  clamp(2rem,     1.2rem + 4.00vw, 3rem);      /* ~32–48px */
  --text-6xl:  clamp(2.25rem,  1rem + 6.25vw, 3.75rem);   /* ~36–60px */
  --text-7xl:  clamp(2.5rem,   0.5rem + 8.00vw, 4.5rem);    /* ~40–72px */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;
  --font-thin:       100;
  --font-light:      300;
  --font-normal:     400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;

  /* ── BORDER RADIUS ── */
  --radius-none: 0;
  --radius-sm:   0.25rem;   /*  4px */
  --radius-md:   0.5rem;    /*  8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-3xl:  2rem;      /* 32px */
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-xs:    0 1px 2px 0 rgb(7 30 42 / 5%);
  --shadow-sm:    0 1px 3px 0 rgb(7 30 42 / 10%), 0 1px 2px -1px rgb(7 30 42 / 10%);
  --shadow-md:    0 4px 6px -1px rgb(7 30 42 / 10%), 0 2px 4px -2px rgb(7 30 42 / 10%);
  --shadow-lg:    0 10px 15px -3px rgb(7 30 42 / 10%), 0 4px 6px -4px rgb(7 30 42 / 10%);
  --shadow-xl:    0 20px 25px -5px rgb(7 30 42 / 10%), 0 8px 10px -6px rgb(7 30 42 / 10%);
  --shadow-2xl:   0 25px 50px -12px rgb(7 30 42 / 25%);
  --shadow-brand: 0 0 0 3px rgb(6 182 212 / 25%);
  --shadow-inner: inset 0 2px 4px 0 rgb(7 30 42 / 6%);

  /* ── TRANSITIONS ── */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-75:   75ms;
  --duration-100:  100ms;
  --duration-150:  150ms;
  --duration-200:  200ms;
  --duration-300:  300ms;
  --duration-500:  500ms;
  --duration-700:  700ms;
  --duration-1000: 1000ms;
  --transition-fast: var(--duration-150) var(--ease-in-out);
  --transition-base: var(--duration-200) var(--ease-in-out);
  --transition-slow: var(--duration-300) var(--ease-in-out);

  /* ── Z-INDEX SCALE ── */
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-banner:    300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     700;
  --z-tooltip:   800;

  /* ── LAYOUT ── */
  --container-sm:      640px;
  --container-md:      768px;
  --container-lg:      1024px;
  --container-xl:      1280px;
  --container-2xl:     1536px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --navbar-height:     76px;
  --content-max-width: 720px;
}

/* ── DARK MODE (OS preference) ─────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:         #0A1A22;
    --bg-surface:      #0D2535;
    --bg-raised:       #123;
    --bg-overlay:      #164E63;
    --bg-brand-subtle: rgb(6 182 212 / 10%);
    --text-primary:    #F0FDFF;
    --text-secondary:  #A5F3FC;
    --text-tertiary:   #67E8F9;
    --text-disabled:   #334155;
    --border-subtle:   rgb(255 255 255 / 6%);
    --border-default:  rgb(255 255 255 / 10%);
    --border-strong:   rgb(255 255 255 / 18%);
    --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 30%);
    --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px -1px rgb(0 0 0 / 40%);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 40%), 0 2px 4px -2px rgb(0 0 0 / 40%);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 50%), 0 4px 6px -4px rgb(0 0 0 / 40%);
  }
}

/* ── DARK MODE (manual JS override via data-theme="dark") ── */
:root[data-theme="dark"] {
  --bg-page:         #0A1A22;
  --bg-surface:      #0D2535;
  --bg-raised:       #123;
  --bg-overlay:      #164E63;
  --bg-brand-subtle: rgb(6 182 212 / 10%);
  --text-primary:    #F0FDFF;
  --text-secondary:  #A5F3FC;
  --text-tertiary:   #67E8F9;
  --text-disabled:   #334155;
  --border-subtle:   rgb(255 255 255 / 6%);
  --border-default:  rgb(255 255 255 / 10%);
  --border-strong:   rgb(255 255 255 / 18%);
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 30%);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px -1px rgb(0 0 0 / 40%);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 40%), 0 2px 4px -2px rgb(0 0 0 / 40%);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 50%), 0 4px 6px -4px rgb(0 0 0 / 40%);
}

/* ── LIGHT MODE (manual JS override via data-theme="light") ── */
:root[data-theme="light"] {
  color-scheme: light;
}