/* ============================================
   variables.css — Passkey Design Tokens
   Sabai color/spacing yahan bata matra.

   Structure (single source of truth):
     1. :root                      → theme-independent tokens (spacing, radius, type…)
     2. :root, [data-theme=light]  → light palette (default when no attribute is set)
     3. [data-theme=dark]          → dark palette

   Rules:
     • Every colour token is defined in BOTH palettes, so switching theme can
       never leave a stale value from the other palette behind.
     • Derived tokens (--accent-subtle, --accent-glow …) are declared inside each
       palette block so they always resolve against that palette's own RGB values.
     • Theme is switched only by setting  <html data-theme="light|dark">
       (see js/theme.js). Nothing else should declare :root colour tokens.
   ============================================ */

/* ── 1. Theme-independent tokens ─────────────── */
:root {
  /* Spacing (8px base) */
  --space-2xs: 2px;  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
  --space-lg: 24px;  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;

  /* Radius */
  --radius-xs: 6px;  --radius-sm: 8px;  --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px;

  /* Type */
  --font-main:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;

  --text-xs: 11px; --text-sm: 12.5px; --text-base: 14px; --text-md: 15px;
  --text-lg: 16px; --text-xl: 18px;   --text-2xl: 22px;  --text-3xl: 28px; --text-4xl: 36px;

  --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;

  /* Layout */
  --sidebar-width: 264px;
  --topbar-height: 68px;

  /* Motion */
  --transition-fast:   120ms cubic-bezier(0.3, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.3, 0, 0.2, 1);
  --transition-slow:   340ms cubic-bezier(0.3, 0, 0.2, 1);
}

/* ── 2. Light palette (default) ──────────────── */
:root,
:root[data-theme="light"] {
  color-scheme: light;   /* native controls, scrollbars, <select> popups follow the theme */

  /* Surfaces */
  --bg-primary:   #f8f9fb;
  --bg-secondary: #ffffff;
  --bg-card:      #ffffff;
  --bg-input:     #f3f5f9;
  --bg-hover:     #eff2f7;

  /* Text */
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #8492a6;
  --text-inverse:   #ffffff;
  --text-on-accent: #ffffff;

  /* Accent */
  --accent-rgb:     37, 99, 235;
  --accent-primary: #2563eb;
  --accent-text:    #2563eb;
  --accent-hover:   #1d4ed8;
  --accent-active:  #1e40af;
  --accent-subtle:  rgba(37, 99, 235, 0.12);
  --accent-glow:    rgba(37, 99, 235, 0.30);

  /* Status */
  --success-rgb: 22, 163, 74;
  --warning-rgb: 217, 119, 6;
  --danger-rgb:  220, 38, 38;
  --surface-rgb: 255, 255, 255;

  --success:        #16a34a;
  --success-subtle: rgba(22, 163, 74, 0.12);
  --warning:        #d97706;
  --warning-subtle: rgba(217, 119, 6, 0.12);
  --danger:         #dc2626;
  --danger-subtle:  rgba(220, 38, 38, 0.10);
  --danger-hover:   #b91c1c;

  /* Borders & shadows */
  --border-color:  #e6e9ef;
  --border-subtle: #eef1f6;
  --border-accent: rgba(37, 99, 235, 0.45);

  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow:      0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-lg:   0 24px 60px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 0 0 3px rgba(37, 99, 235, 0.20);

  /* Password strength */
  --strength-weak:   #dc2626;
  --strength-fair:   #d97706;
  --strength-good:   #2563eb;
  --strength-strong: #16a34a;
}

/* ── 3. Dark palette ─────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg-primary:   #0b1220;
  --bg-secondary: #0f172a;
  --bg-card:      #111c33;
  --bg-input:     #0b1426;
  --bg-hover:     #18243f;

  /* Text */
  --text-primary:   #e6ebf5;
  --text-secondary: #a2b0c8;
  --text-muted:     #75839c;
  --text-inverse:   #0b1220;
  --text-on-accent: #ffffff;

  /* Accent */
  --accent-rgb:     59, 130, 246;
  --accent-primary: #3b82f6;
  --accent-text:    #6ea8ff;
  --accent-hover:   #5b9bff;
  --accent-active:  #2563eb;
  --accent-subtle:  rgba(59, 130, 246, 0.16);
  --accent-glow:    rgba(59, 130, 246, 0.35);

  /* Status */
  --success-rgb: 52, 211, 153;
  --warning-rgb: 251, 191, 36;
  --danger-rgb:  248, 113, 113;
  --surface-rgb: 17, 28, 51;

  --success:        #34d399;
  --success-subtle: rgba(52, 211, 153, 0.14);
  --warning:        #fbbf24;
  --warning-subtle: rgba(251, 191, 36, 0.14);
  --danger:         #f87171;
  --danger-subtle:  rgba(248, 113, 113, 0.14);
  --danger-hover:   #ef4444;

  /* Borders & shadows */
  --border-color:  #1f2c4a;
  --border-subtle: #16223d;
  --border-accent: rgba(59, 130, 246, 0.50);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow:      0 8px 22px rgba(0, 0, 0, 0.40);
  --shadow-lg:   0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 3px rgba(59, 130, 246, 0.25);

  /* Password strength */
  --strength-weak:   #f87171;
  --strength-fair:   #fbbf24;
  --strength-good:   #60a5fa;
  --strength-strong: #34d399;
}