/* ==========================================================
   tokens.css — Design system custom properties
   Single source of truth for all color, spacing, radius,
   shadow, typography, and motion tokens in NotesMind.
   ========================================================== */

/* ─── Dark theme (default) ─────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-base:            #0B0D10;
  --bg-surface:         #14171B;
  --bg-surface-raised:  #1B1F24;
  --bg-hover:           #1F2329;

  /* Borders */
  --border-subtle:      #262B31;
  --border-strong:      #3A4149;

  /* Text */
  --text-primary:       #F3F4F6;
  --text-secondary:     #9CA3AF;
  --text-tertiary:      #6B7280;
  --text-inverse:       #111827;

  /* Accent (indigo) */
  --accent:             #6366F1;
  --accent-hover:       #7C7FF2;
  --accent-subtle:      rgba(99, 102, 241, 0.12);
  --accent-text:        #A5B4FC;

  /* Semantic */
  --success:            #22C55E;
  --success-subtle:     rgba(34, 197, 94, 0.12);
  --warning:            #F59E0B;
  --warning-subtle:     rgba(245, 158, 11, 0.12);
  --danger:             #EF4444;
  --danger-subtle:      rgba(239, 68, 68, 0.12);
  --info:               #38BDF8;
  --info-subtle:        rgba(56, 189, 248, 0.12);

  /* Shadows */
  --shadow-sm:          0 1px 2px rgba(0,0,0,.24);
  --shadow-md:          0 4px 12px rgba(0,0,0,.28);
  --shadow-lg:          0 12px 32px rgba(0,0,0,.32);
  --shadow-xl:          0 24px 48px rgba(0,0,0,.40);

  /* Border radius */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-2xl:         24px;
  --radius-full:        9999px;

  /* Spacing (4px base unit) */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;

  /* Typography scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   48px;

  /* Font weights */
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* Motion */
  --duration-micro:  100ms;
  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --ease-out:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:         cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-out:     cubic-bezier(0.645, 0.045, 0.355, 1.0);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --nav-rail-width:      240px;
  --nav-rail-collapsed:  64px;
  --content-max:         1280px;
  --chat-max:            800px;

  /* Specific component tokens */
  --input-bg:        var(--bg-surface);
  --input-border:    var(--border-subtle);
  --input-focus:     var(--accent);
  --overlay:         rgba(0, 0, 0, 0.6);

  /* Scrollbar */
  --scrollbar-track: var(--bg-base);
  --scrollbar-thumb: var(--border-strong);
}

/* ─── Light theme ───────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:            #FFFFFF;
  --bg-surface:         #F7F8FA;
  --bg-surface-raised:  #EDEEF2;
  --bg-hover:           #F0F1F5;

  --border-subtle:      #E4E7EC;
  --border-strong:      #CDD0D8;

  --text-primary:       #111827;
  --text-secondary:     #6B7280;
  --text-tertiary:      #9CA3AF;
  --text-inverse:       #F3F4F6;

  --accent:             #4F52D4;
  --accent-hover:       #3D40C0;
  --accent-subtle:      rgba(79, 82, 212, 0.10);
  --accent-text:        #4F52D4;

  --success:            #16A34A;
  --success-subtle:     rgba(22, 163, 74, 0.10);
  --warning:            #D97706;
  --warning-subtle:     rgba(217, 119, 6, 0.10);
  --danger:             #DC2626;
  --danger-subtle:      rgba(220, 38, 38, 0.10);
  --info:               #0284C7;
  --info-subtle:        rgba(2, 132, 199, 0.10);

  --shadow-sm:          0 1px 3px rgba(0,0,0,.08);
  --shadow-md:          0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:          0 12px 32px rgba(0,0,0,.12);
  --shadow-xl:          0 24px 48px rgba(0,0,0,.16);

  --overlay:            rgba(0, 0, 0, 0.4);
  --scrollbar-track:    #F0F1F5;
  --scrollbar-thumb:    #CDD0D8;
}