/* ============================================================
   AI Mentor — Theme System
   This file is the single source of truth for all visual tokens.
   To customize: edit values here. app.css consumes these vars.
   ============================================================ */

/* ── Layer 1: Brand Primitives ─────────────────────────────── */
:root {
  --obsidian:  #1A1A1A;
  --ember:     #C2382A;
  --saffron:   #E8742A;
  --tide:      #2B6B8A;
  --bone:      #F5F0EB;

  /* App surfaces */
  --bg:        #0B0B0B;
  --surface:   #111111;
  --surface-2: #171717;
  --surface-3: #1E1E1E;

  /* Borders */
  --border:        rgba(255,255,255,0.06);
  --border-hover:  rgba(255,255,255,0.12);
  --border-active: rgba(232,116,42,0.35);

  /* Text hierarchy — matches brand kit */
  --t1: #F5F0EB;
  --t2: rgba(245,240,235,0.50);
  --t3: rgba(245,240,235,0.30);
  --t4: rgba(245,240,235,0.15);
}

/* ── Layer 2: Semantic Roles ───────────────────────────────── */
:root {
  --color-bg:           var(--bg);
  --color-surface:      var(--surface);
  --color-surface-high: var(--surface-2);
  --color-surface-input:var(--surface-3);

  --color-text:         var(--t1);
  --color-text-muted:   var(--t2);
  --color-text-faint:   var(--t3);
  --color-text-ghost:   var(--t4);

  --color-accent:       var(--ember);
  --color-accent-warm:  var(--saffron);
  --color-accent-cool:  var(--tide);

  --color-success:      #3A9B6F;
  --color-warning:      var(--saffron);
  --color-error:        var(--ember);
  --color-info:         var(--tide);

  --color-border:       var(--border);
  --color-border-hover: var(--border-hover);
  --color-border-focus: var(--border-active);

  --gradient-brand:     linear-gradient(135deg, var(--ember), var(--saffron));
  --gradient-cool:      linear-gradient(135deg, var(--tide), var(--obsidian));
  --gradient-hero-glow: radial-gradient(circle, rgba(194,56,42,0.06) 0%, rgba(43,107,138,0.04) 35%, transparent 65%);
}

/* ── Layer 3: Phase Color System ───────────────────────────── */
:root {
  /* Phase 1 — AI Essentials (Ember) */
  --phase-1:       #C2382A;
  --phase-1-muted: rgba(194,56,42,0.15);
  --phase-1-glow:  rgba(194,56,42,0.08);
  --phase-1-text:  #E8746A;

  /* Phase 2 — AI × Design (Saffron) */
  --phase-2:       #E8742A;
  --phase-2-muted: rgba(232,116,42,0.15);
  --phase-2-glow:  rgba(232,116,42,0.08);
  --phase-2-text:  #F09456;

  /* Phase 3 — AI × Marketing (Amber Gold) */
  --phase-3:       #D4A72C;
  --phase-3-muted: rgba(212,167,44,0.15);
  --phase-3-glow:  rgba(212,167,44,0.08);
  --phase-3-text:  #E4BF58;

  /* Phase 4 — AI × Social (Tide) */
  --phase-4:       #2B6B8A;
  --phase-4-muted: rgba(43,107,138,0.15);
  --phase-4-glow:  rgba(43,107,138,0.08);
  --phase-4-text:  #5A9DB8;

  /* Phase 5 — AI Automation (Seafoam) */
  --phase-5:       #2A8A6E;
  --phase-5-muted: rgba(42,138,110,0.15);
  --phase-5-glow:  rgba(42,138,110,0.08);
  --phase-5-text:  #5AB89E;

  /* Phase 6 — AI × Dev & SaaS (Violet) */
  --phase-6:       #6B5EA8;
  --phase-6-muted: rgba(107,94,168,0.15);
  --phase-6-glow:  rgba(107,94,168,0.08);
  --phase-6-text:  #9B8ED8;

  /* Phase 7 — AI Visual Production (Rose) */
  --phase-7:       #B5447A;
  --phase-7-muted: rgba(181,68,122,0.15);
  --phase-7-glow:  rgba(181,68,122,0.08);
  --phase-7-text:  #D97FAB;
}

/* ── Layer 4: Typography ───────────────────────────────────── */
:root {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Outfit', system-ui, -apple-system, sans-serif;

  --text-display: clamp(2.4rem, 5vw, 3.8rem);
  --text-h1:      clamp(1.8rem, 3.5vw, 2.6rem);
  --text-h2:      clamp(1.4rem, 2.5vw, 1.9rem);
  --text-h3:      1.2rem;
  --text-body-lg: 1.05rem;
  --text-body:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-eyebrow: 0.65rem;
}

/* ── Layer 5: Motion & Spacing ─────────────────────────────── */
:root {
  /* House easing — from brand kit */
  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-in:  cubic-bezier(.4,0,1,1);
  --ease-out: cubic-bezier(0,0,.2,1);

  --dur-fast:  180ms;
  --dur-base:  300ms;
  --dur-slow:  500ms;
  --dur-enter: 800ms;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 40px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --content-width: 1100px;
  --sidebar-width: 260px;
  --nav-height:    64px;
}

/* ── Layer 6: Component Tokens ─────────────────────────────── */
:root {
  --card-bg:      var(--color-surface);
  --card-border:  var(--color-border);
  --card-radius:  var(--radius-lg);
  --card-pad:     var(--space-6);

  --btn-height-sm:  34px;
  --btn-height-md:  42px;
  --btn-height-lg:  52px;
  --btn-radius:     var(--radius-pill);
  --btn-primary-bg: var(--color-accent);

  --input-bg:      var(--color-surface-input);
  --input-border:  var(--color-border);
  --input-focus:   var(--color-border-focus);
  --input-height:  44px;
  --input-radius:  var(--radius-sm);

  --nav-bg:    rgba(11,11,11,0.88);
  --nav-blur:  20px;

  --progress-track: rgba(255,255,255,0.06);
  --progress-fill:  var(--color-accent);
}