/* ============================================================
   APlusZ — Design Tokens (Step 4)
   File: frontend/assets/tokens.css
   Save: D:\Destop\AplusZ\frontend\assets\tokens.css
   ============================================================ */

/* ---------- ROOT (shared across all themes) ---------- */
:root {
  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (mobile-first) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-hero: 3rem;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Radius (M3 Expressive — varied corners) */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Motion (M3 spring + iOS ease) */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-ios: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Glass (Liquid Glass effect) */
  --glass-blur: 20px;
  --glass-saturate: 180%;

  /* Z-index */
  --z-base: 1;
  --z-overlay: 10;
  --z-modal: 100;
  --z-toast: 1000;
}

/* ============================================================
   🌑 THEME 1 — DARK GLASS (iOS Liquid Glass style, default)
   ============================================================ */
:root,
[data-theme="dark-glass"] {
  --bg: #0f172a;
  --bg-elevated: rgba(30, 41, 59, 0.7);
  --bg-glass: rgba(15, 23, 42, 0.6);
  --surface: #1e293b;
  --border: #334155;

  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --accent: #facc15;
  --accent-hover: #fde047;
  --link: #60a5fa;
  --success: #4ade80;
  --warning: #fb923c;
  --danger: #f87171;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  --glow: 0 0 24px rgba(250, 204, 21, 0.15);

  color-scheme: dark;
}

/* ============================================================
   🌕 THEME 2 — LIGHT EXPRESSIVE (Android M3 Expressive style)
   ============================================================ */
[data-theme="light-expressive"] {
  --bg: #fafafa;
  --bg-elevated: rgba(255, 255, 255, 0.85);
  --bg-glass: rgba(250, 250, 250, 0.7);
  --surface: #ffffff;
  --border: #e5e7eb;

  --text: #1a1a1a;
  --text-muted: #4b5563;
  --text-dim: #9ca3af;

  --accent: #0066cc;
  --accent-hover: #0052a3;
  --link: #2563eb;
  --success: #16a34a;
  --warning: #ea580c;
  --danger: #dc2626;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --glow: 0 0 24px rgba(0, 102, 204, 0.15);

  color-scheme: light;
}

/* ============================================================
   📖 THEME 3 — SEPIA READER (eBook warm, daytime)
   ============================================================ */
[data-theme="sepia-reader"] {
  --bg: #f4ecd8;
  --bg-elevated: rgba(248, 241, 220, 0.9);
  --bg-glass: rgba(244, 236, 216, 0.75);
  --surface: #fbf5e3;
  --border: #d6c9a8;

  --text: #3a2f1f;
  --text-muted: #6b5840;
  --text-dim: #8a7a5e;

  --accent: #8b6f47;
  --accent-hover: #6f5837;
  --link: #5a7a8c;
  --success: #5c7a3f;
  --warning: #b8702a;
  --danger: #a83232;

  --shadow-sm: 0 1px 2px rgba(90, 70, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(90, 70, 40, 0.12);
  --shadow-lg: 0 12px 32px rgba(90, 70, 40, 0.18);
  --glow: 0 0 24px rgba(139, 111, 71, 0.2);

  color-scheme: light;
}

/* ============================================================
   🌙 THEME 4 — SEPIA NIGHT (warm dark, night reading)
   ============================================================ */
[data-theme="sepia-night"] {
  --bg: #1f1a14;
  --bg-elevated: rgba(40, 33, 25, 0.8);
  --bg-glass: rgba(31, 26, 20, 0.7);
  --surface: #2a231a;
  --border: #44382a;

  --text: #e8dcc4;
  --text-muted: #b8a888;
  --text-dim: #8a7a5e;

  --accent: #d4a574;
  --accent-hover: #e6b88a;
  --link: #a8c4d4;
  --success: #94b573;
  --warning: #e89a5c;
  --danger: #d97070;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
  --glow: 0 0 24px rgba(212, 165, 116, 0.2);

  color-scheme: dark;
}

/* ============================================================
   AUTO-DETECT (OS preference, before JS loads)
   ============================================================ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #fafafa;
    --bg-elevated: rgba(255, 255, 255, 0.85);
    --bg-glass: rgba(250, 250, 250, 0.7);
    --surface: #ffffff;
    --border: #e5e7eb;
    --text: #1a1a1a;
    --text-muted: #4b5563;
    --text-dim: #9ca3af;
    --accent: #0066cc;
    --accent-hover: #0052a3;
    --link: #2563eb;
    --success: #16a34a;
    --warning: #ea580c;
    --danger: #dc2626;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
    --glow: 0 0 24px rgba(0, 102, 204, 0.15);
    color-scheme: light;
  }
}

/* ============================================================
   ACCESSIBILITY (reduced motion)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}