/* ============================================================
   TOKENS.CSS — Design Tokens / Custom Properties
   PWA CSS Library by CSTRSK
   ============================================================ */

:root {

  /* ── COLOR PALETTE ─────────────────────────────────────── */

  /* Brand */
  --color-brand-50:  #eef2ff;
  --color-brand-100: #e0e7ff;
  --color-brand-200: #c7d2fe;
  --color-brand-300: #a5b4fc;
  --color-brand-400: #818cf8;
  --color-brand-500: #6366f1;  /* primary */
  --color-brand-600: #4f46e5;
  --color-brand-700: #4338ca;
  --color-brand-800: #3730a3;
  --color-brand-900: #312e81;
  --color-brand-950: #1e1b4b;

  /* Accent */
  --color-accent-400: #34d399;
  --color-accent-500: #10b981;
  --color-accent-600: #059669;

  /* Neutral (Zinc scale) */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f4f4f5;
  --color-neutral-200: #e4e4e7;
  --color-neutral-300: #d4d4d8;
  --color-neutral-400: #a1a1aa;
  --color-neutral-500: #71717a;
  --color-neutral-600: #52525b;
  --color-neutral-700: #3f3f46;
  --color-neutral-800: #27272a;
  --color-neutral-900: #18181b;
  --color-neutral-950: #09090b;

  /* Semantic */
  --color-success-bg:   #f0fdf4;
  --color-success:      #16a34a;
  --color-warning-bg:   #fffbeb;
  --color-warning:      #d97706;
  --color-error-bg:     #fef2f2;
  --color-error:        #dc2626;
  --color-info-bg:      #eff6ff;
  --color-info:         #2563eb;

  /* ── SEMANTIC ALIASES (LIGHT MODE) ─────────────────────── */

  --bg-base:        var(--color-neutral-50);
  --bg-surface:     var(--color-neutral-0);
  --bg-elevated:    var(--color-neutral-0);
  --bg-overlay:     rgba(0, 0, 0, 0.45);
  --bg-subtle:      var(--color-neutral-100);

  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);
  --border-focus:   var(--color-brand-500);

  --text-primary:   var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary:  var(--color-neutral-400);
  --text-disabled:  var(--color-neutral-300);
  --text-inverse:   var(--color-neutral-0);
  --text-brand:     var(--color-brand-600);
  --text-accent:    var(--color-accent-600);

  --icon-default:   var(--color-neutral-500);
  --icon-brand:     var(--color-brand-500);

  --interactive-primary:      var(--color-brand-500);
  --interactive-primary-hover:var(--color-brand-600);
  --interactive-primary-text: var(--color-neutral-0);
  --interactive-secondary:    var(--color-neutral-100);
  --interactive-secondary-hover: var(--color-neutral-200);
  --interactive-destructive:  var(--color-error);

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */

  --font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-display: 'Inter', sans-serif;

  /* Scale (Major Third — 1.250) */
  --text-xs:   0.64rem;   /* 10.24px */
  --text-sm:   0.8rem;    /* 12.8px  */
  --text-base: 1rem;      /* 16px    */
  --text-md:   1.25rem;   /* 20px    */
  --text-lg:   1.563rem;  /* 25px    */
  --text-xl:   1.953rem;  /* 31.25px */
  --text-2xl:  2.441rem;  /* 39px    */
  --text-3xl:  3.052rem;  /* 48.8px  */

  /* Weight */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* Line height */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-widest:  0.1em;

  /* ── SPACING ────────────────────────────────────────────── */

  --space-0:    0px;
  --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-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* ── RADIUS ─────────────────────────────────────────────── */

  --radius-none: 0px;
  --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-full: 9999px;

  /* ── SHADOWS ────────────────────────────────────────────── */

  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,.06);
  --shadow-brand: 0 0 0 3px rgba(99,102,241,.25);

  /* ── Z-INDEX ────────────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;

  /* ── TRANSITIONS ────────────────────────────────────────── */

  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
  --duration-xslow:  600ms;

  --ease-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --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);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast:   all var(--duration-fast) var(--ease-default);
  --transition-normal: all var(--duration-normal) var(--ease-default);
  --transition-slow:   all var(--duration-slow) var(--ease-default);

  /* ── PWA / MOBILE SPECIFIC ──────────────────────────────── */

  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);

  /* Tap target minimum */
  --tap-min: 44px;

  /* App chrome sizes */
  --topbar-height:    56px;
  --bottombar-height: 60px;
  --sidebar-width:    260px;
  --drawer-width:     320px;
}

/* ── DARK MODE ──────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base:        var(--color-neutral-950);
    --bg-surface:     var(--color-neutral-900);
    --bg-elevated:    var(--color-neutral-800);
    --bg-subtle:      var(--color-neutral-800);
    --bg-overlay:     rgba(0, 0, 0, 0.65);

    --border-default: var(--color-neutral-700);
    --border-strong:  var(--color-neutral-600);

    --text-primary:   var(--color-neutral-50);
    --text-secondary: var(--color-neutral-400);
    --text-tertiary:  var(--color-neutral-600);
    --text-disabled:  var(--color-neutral-700);
    --text-brand:     var(--color-brand-400);
    --text-accent:    var(--color-accent-400);

    --icon-default:   var(--color-neutral-400);

    --interactive-secondary:      var(--color-neutral-800);
    --interactive-secondary-hover:var(--color-neutral-700);

    --shadow-sm:  0 1px 3px rgba(0,0,0,.30);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,.40);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.50);
  }
}

/* Force dark / light via data attribute */
[data-theme="dark"]  { color-scheme: dark;  }
[data-theme="light"] { color-scheme: light; }