/* ═══════════════════════════════════════════
   FragranceAI — Design Tokens
   Cool minimalist + tech aesthetic
   ═══════════════════════════════════════════ */

/* ── Light Theme (Default) ── */
:root {
  /* ── Accent Colors (Cyan/Cool) ── */
  --accent:           #0891b2;  /* cyan-600 — primary accent */
  --accent-bright:    #06b6d4;  /* cyan-500 — hover/bright states */
  --accent-deep:      #0e7490;  /* cyan-700 — deep accent */
  --accent-soft:      rgba(8, 145, 178, 0.1);  /* subtle tint for badges/chips */

  /* ── Surfaces ── */
  --bg-primary:       #fafafa;   /* zinc-50 — main background */
  --bg-secondary:     #f4f4f5;  /* zinc-100 — alt sections */
  --bg-card:          #ffffff;

  /* ── Text ── */
  --text-primary:     #27272a;   /* zinc-800 */
  --text-secondary:   #52525b;   /* zinc-600 */
  --text-muted:       #a1a1aa;   /* zinc-400 */

  /* ── Borders ── */
  --border:           rgba(0, 0, 0, 0.06);
  --border-strong:    rgba(0, 0, 0, 0.1);

  /* ── Gray Scale (for backward compat, maps to zinc) ── */
  --gray-50:       #fafafa;
  --gray-100:      #f4f4f5;
  --gray-200:      #e4e4e7;
  --gray-400:      #a1a1aa;
  --gray-600:      #52525b;
  --gray-800:      #27272a;

  /* ── Shadows (minimal) ── */
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:           0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl:        0 10px 40px rgba(0, 0, 0, 0.1);
  --shadow-glow-cyan: 0 0 12px rgba(8, 145, 178, 0.15);

  /* ── Typography ── */
  --font-primary:     -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono:        "JetBrains Mono", "SF Mono", Menlo, Monaco, "Courier New", monospace;

  /* Font Size Scale */
  --text-xs:       0.75rem;    /* 12px */
  --text-sm:       0.875rem;   /* 14px */
  --text-base:     1rem;       /* 16px */
  --text-lg:       1.125rem;   /* 18px */
  --text-xl:       1.25rem;    /* 20px */
  --text-2xl:      1.5rem;     /* 24px */
  --text-3xl:      1.875rem;   /* 30px */
  --text-4xl:      2.25rem;    /* 36px */
  --text-5xl:      3rem;       /* 48px */

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

  /* Line Height */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tightest: -0.05em;
  --tracking-tighter:  -0.03em;
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;

  /* ── Spacing (4px base) ── */
  --space-0:   0;
  --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;
  --space-20:  80px;
  --space-24:  96px;

  /* ── Border Radius (uniform, tech feel) ── */
  --radius-sm:  6px;
  --radius:     8px;    /* default — buttons, inputs, small cards */
  --radius-md:  12px;   /* cards, containers */
  --radius-lg:  16px;   /* modals, large containers */

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition:      200ms ease;
  --transition-slow: 300ms ease;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --accent:           #22d3ee;   /* cyan-400 — glows on dark */
  --accent-bright:    #67e8f9;   /* cyan-300 */
  --accent-deep:      #0891b2;   /* cyan-600 */
  --accent-soft:      rgba(34, 211, 238, 0.12);

  --bg-primary:       #09090b;   /* zinc-950 — true dark */
  --bg-secondary:     #18181b;   /* zinc-900 */
  --bg-card:          #18181b;

  --text-primary:     #e4e4e7;   /* zinc-200 */
  --text-secondary:   #a1a1aa;   /* zinc-400 */
  --text-muted:       #71717a;   /* zinc-500 */

  --border:           rgba(255, 255, 255, 0.06);
  --border-strong:    rgba(255, 255, 255, 0.1);

  /* ── Gray Scale (dark) ── */
  --gray-50:       #18181b;
  --gray-100:      #27272a;
  --gray-200:      #3f3f46;
  --gray-400:      #71717a;
  --gray-600:      #a1a1aa;
  --gray-800:      #e4e4e7;

  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:           0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl:        0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow-cyan: 0 0 16px rgba(34, 211, 238, 0.2);
}

/* ── Dark Theme Component Overrides ── */
[data-theme="dark"] .hero,
[data-theme="dark"] .ocr-hero {
  background: linear-gradient(135deg, #0a1628 0%, #0f2027 50%, #0a1a1e 100%);
}

[data-theme="dark"] .hero-bg,
[data-theme="dark"] .ocr-hero-bg {
  background:
    radial-gradient(ellipse 700px 500px at 15% 30%, rgba(34, 211, 238, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 20%, rgba(6, 182, 212, 0.04) 0%, transparent 55%);
}

[data-theme="dark"] .section-alt {
  background: var(--bg-secondary);
}

[data-theme="dark"] .topnav {
  background: rgba(9, 9, 11, 0.9);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .login-page {
  background: linear-gradient(135deg, #0a1628 0%, #0f2027 50%, #0a1a1e 100%);
}

[data-theme="dark"] .footer {
  background: var(--bg-secondary);
  border-top-color: var(--border);
}