/**
 * Aura Link Design Tokens
 * Source of truth: 02_frontend/DESIGN_SYSTEM.md
 * All CSS custom properties. Never hardcode values — always use a token.
 */

/* ============================================================
   FONT IMPORTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;700&family=Cormorant+Garamond:ital@1&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   ROOT TOKENS — Light Theme (default)
   ============================================================ */
:root {
  /* === Brand === */
  --color-brand:           #1E63FF;   /* primary actions, links, focus */
  --color-brand-hover:     #1852D1;
  --color-brand-soft:      #EFF4FF;   /* backgrounds, badges */
  --color-accent:          #00C2FF;   /* secondary accent, highlights, gradient ends */
  --color-accent-soft:     #E0F7FF;
  --color-navy:            #0B0F1A;   /* dark theme base */

  /* === Semantic === */
  --color-success:         #059669;
  --color-success-soft:    #ECFDF5;
  --color-warn:            #D97706;
  --color-warn-soft:       #FFFBEB;
  --color-danger:          #DC2626;
  --color-danger-soft:     #FEF2F2;
  --color-info:            #1E63FF;
  --color-info-soft:       #EFF4FF;
  --color-purple:          #7C3AED;   /* used for "waiting" status */
  --color-purple-soft:     #F5F3FF;

  /* === Surface (light theme defaults) === */
  --color-bg:              #FAFAFA;
  --color-bg-elev:         #FFFFFF;
  --color-bg-subtle:       #F4F5F7;
  --color-bg-subtler:      #F9FAFB;
  --color-bg-hover:        #F4F5F7;

  --color-border:          #E5E7EB;
  --color-border-strong:   #D1D5DB;

  --color-ink:             #111827;
  --color-ink-1:           #374151;
  --color-ink-2:           #6B7280;
  --color-ink-3:           #9CA3AF;

  /* === Typography === */
  --font-sans-product: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans-brand:   'Montserrat', 'Inter', system-ui, sans-serif;
  --font-serif:        'Cormorant Garamond', Georgia, serif;
  --font-mono:         'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* === Type Scale === */
  --text-xs:     11px;    /* metadata, hints */
  --text-sm:     12px;    /* secondary text, dense UI */
  --text-base:   14px;    /* body, default UI */
  --text-md:     16px;    /* emphasized body, marketing body */
  --text-lg:     18px;
  --text-xl:     22px;    /* card titles, section labels */
  --text-2xl:    28px;    /* page titles in admin/portal */
  --text-3xl:    36px;    /* small marketing headings */
  --text-4xl:    52px;    /* large marketing headings */
  --text-5xl:    72px;    /* hero on the public site */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* === Spacing (8px base scale) === */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;     /* default padding inside cards/buttons */
  --space-5:  20px;
  --space-6:  24px;     /* card-to-card gap */
  --space-8:  32px;     /* section internal padding */
  --space-10: 40px;
  --space-12: 48px;     /* major section gap */
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;    /* hero sections */

  /* === Borders & Radii === */
  --radius-xs:   3px;     /* badges, tiny chips */
  --radius-sm:   4px;     /* small buttons */
  --radius:      8px;     /* cards, inputs, primary radius */
  --radius-md:   12px;    /* large cards */
  --radius-lg:   16px;
  --radius-full: 9999px;  /* pills, avatars */

  --border:           1px solid var(--color-border);
  --border-strong:    1px solid var(--color-border-strong);
  --border-brand:     1px solid var(--color-brand);

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 2px 4px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);   /* modals, agent widget */
  --shadow-xl: 0 24px 60px rgba(16, 24, 40, 0.18);   /* dropdown menus, tooltips */

  /* === Motion === */
  --transition-fast:    120ms ease-out;
  --transition-default: 200ms ease-out;
  --transition-slow:    400ms ease-in-out;

  --ease-out-quad:    cubic-bezier(0.5, 0, 0.5, 1);
  --ease-out-cubic:   cubic-bezier(0.33, 1, 0.68, 1);
  --ease-spring:      cubic-bezier(0.5, 1.5, 0.5, 1);   /* playful, sparingly */

  /* === Z-Index Scale === */
  --z-base:        0;
  --z-elevated:    10;
  --z-sticky:      20;     /* sticky headers */
  --z-dropdown:    30;
  --z-modal-bg:    40;
  --z-modal:       50;
  --z-toast:       60;
  --z-agent:       70;     /* AI agent widget always on top */
}

/* ============================================================
   DARK THEME OVERRIDE
   Used by: public site (hardcoded), portal (hardcoded)
   Admin: uses prefers-color-scheme + manual toggle
   ============================================================ */
[data-theme="dark"] {
  --color-bg:              #0B0F1A;
  --color-bg-elev:         #111827;
  --color-bg-subtle:       #1F2937;
  --color-bg-subtler:      #131B2A;
  --color-bg-hover:        #1F2937;

  --color-border:          rgba(255, 255, 255, 0.08);
  --color-border-strong:   rgba(255, 255, 255, 0.16);

  --color-ink:             #F9FAFB;
  --color-ink-1:           #E5E7EB;
  --color-ink-2:           #9CA3AF;
  --color-ink-3:           #6B7280;

  --color-brand:           #00C2FF;     /* cyan reads better on dark */
  --color-brand-hover:     #33D4FF;
  --color-brand-soft:      rgba(0, 194, 255, 0.10);
}

/* System dark mode for admin (when no manual override set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #0B0F1A;
    --color-bg-elev:         #111827;
    --color-bg-subtle:       #1F2937;
    --color-bg-subtler:      #131B2A;
    --color-bg-hover:        #1F2937;

    --color-border:          rgba(255, 255, 255, 0.08);
    --color-border-strong:   rgba(255, 255, 255, 0.16);

    --color-ink:             #F9FAFB;
    --color-ink-1:           #E5E7EB;
    --color-ink-2:           #9CA3AF;
    --color-ink-3:           #6B7280;

    --color-brand:           #00C2FF;
    --color-brand-hover:     #33D4FF;
    --color-brand-soft:      rgba(0, 194, 255, 0.10);
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}