/**
 * braceai_tokens.css  — Design System v3.0
 * ─────────────────────────────────────────────────────────────
 * BraceAI — Global design tokens
 * Purple 60% · Blue 25% · Neutral 10% · White 5%
 * Import this file FIRST before any other BraceAI stylesheet.
 * ─────────────────────────────────────────────────────────────
 */

/* ── Google Fonts — v3 type system ──────────────────────────
   Plus Jakarta Sans → display headings  (700, 800)
   Inter             → body copy         (300, 400, 500, 600, 700)
   JetBrains Mono    → code / mono       (400, 600)
   ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {

  /* ── Typography ─────────────────────────────────────────── */
  --braceai-font:          'Inter', sans-serif;
  --braceai-font-body:     'Inter', sans-serif;
  --braceai-font-display:  'Plus Jakarta Sans', sans-serif;
  --braceai-font-mono:     'JetBrains Mono', monospace;

  /* ── Purple scale — dominant (60% of UI) ───────────────── */
  --braceai-navy-950:  #160838;   /* deepest dark — hero base */
  --braceai-navy-900:  #1E0D4A;   /* hero, dark sections — primary dark */
  --braceai-navy-800:  #2A1260;   /* deep section backgrounds */
  --braceai-navy-700:  #361875;   /* cards on dark */
  --braceai-navy-600:  #421E8A;   /* elevated surfaces */
  --braceai-navy-500:  #5422BA;   /* brand purple — core */
  --braceai-navy-400:  #6D3FC2;   /* brand purple — light end */
  --braceai-navy-300:  #9370D8;   /* muted purple for borders/dividers */
  --braceai-navy-200:  #C9B3EE;   /* very light purple tint */
  --braceai-navy-100:  #E8DFFE;   /* purple wash */
  --braceai-navy-50:   #F4F0FF;   /* purple tinted page sections */

  /* --braceai-navy kept for backward compat (JS/HTML refs) */
  --braceai-navy:      #1E0D4A;

  /* ── Blue — primary action (25%, CTA moments only) ──────── */
  --braceai-orange-500:  #3E73FA;  /* primary CTA — brand blue */
  --braceai-orange-600:  #3CA5FA;  /* hover / gradient end — sky blue */
  --braceai-orange-700:  #2A5ED4;  /* deep pressed state */
  --braceai-orange-100:  #DCEAFE;
  --braceai-orange-50:   #EEF4FF;

  /* --braceai-brand kept for backward compat */
  --braceai-brand:        #3E73FA;
  --braceai-brand-light:  #3CA5FA;
  --braceai-brand-hover:  #2A5ED4;

  /* ── Neutral — secondary accent (10%) ───────────────────── */
  --braceai-amber-300:  #EBEBEB;
  --braceai-amber-200:  #F2F2F2;
  --braceai-amber-100:  #F8F8F8;

  /* --braceai-amber kept for backward compat */
  --braceai-amber:      #EBEBEB;

  /* ── Surfaces & neutrals ────────────────────────────────── */
  --braceai-bg:       #FAFAFA;
  --braceai-surface:  #FFFFFF;
  --braceai-cream:    #FAFAFA;

  --braceai-gray-50:   #F8F8F8;
  --braceai-gray-100:  #F0F0F2;
  --braceai-gray-200:  #EBEBEB;
  --braceai-gray-300:  #D1D1D8;
  --braceai-gray-400:  #8F8FA3;
  --braceai-gray-500:  #5C5C78;
  --braceai-gray-700:  #2E2E46;
  --braceai-gray-900:  #111118;

  /* --braceai-body / gray / border kept for backward compat */
  --braceai-body:    #1A1A2E;
  --braceai-gray:    #64648B;
  --braceai-border:  #EBEBEB;

  /* ── Semantic ────────────────────────────────────────────── */
  --braceai-success:  #16A34A;
  --braceai-error:    #DC2626;
  --braceai-warning:  #D97706;

  /* backward compat aliases */
  --braceai-green:   #10B981;
  --braceai-blue:    #3E73FA;
  --braceai-purple:  #5422BA;
  --braceai-red:     #DC2626;
  --braceai-cyan:    #06B6D4;
  --braceai-pink:    #EC4899;
  --braceai-indigo:  #5422BA;

  /* ── Arm accent colours (non-negotiable) ────────────────── */
  --arm-career:             #E85D04;
  --arm-personal-branding:  #8B5CF6;
  --arm-course-engine:      #10B981;
  --arm-business-branding:  #3B82F6;

  /* ── Gradients ──────────────────────────────────────────── */

  /* CTA — blue, reserved for primary action moments only */
  --grad-cta:          linear-gradient(135deg, #3E73FA 0%, #3CA5FA 100%);
  --grad-cta-horiz:    linear-gradient(90deg,  #3E73FA 0%, #3CA5FA 100%);
  --grad-amber-burst:  linear-gradient(135deg, #5422BA 0%, #3E73FA 100%);

  /* Purple — dominant backgrounds */
  --grad-hero:         linear-gradient(150deg, #160838 0%, #1E0D4A 45%, #2A1260 100%);
  --grad-hero-rich:    linear-gradient(145deg, #160838 0%, #1E0D4A 35%, #2A1260 70%, #361875 100%);
  --grad-hero-mesh:    radial-gradient(at 15% 25%, rgba(62,115,250,.18) 0px, transparent 50%),
                       radial-gradient(at 85% 75%, rgba(109,63,194,.14) 0px, transparent 50%),
                       linear-gradient(150deg, #160838 0%, #1E0D4A 45%, #2A1260 100%);
  --grad-navy-mid:     linear-gradient(135deg, #1E0D4A 0%, #5422BA 100%);
  --grad-navy-card:    linear-gradient(135deg, #2A1260 0%, #361875 100%);
  --grad-section:      linear-gradient(180deg, #1E0D4A 0%, #2A1260 100%);

  /* Brand purple gradient — core identity */
  --grad-purple:       linear-gradient(135deg, #5422BA 0%, #6D3FC2 100%);
  --grad-purple-horiz: linear-gradient(90deg,  #5422BA 0%, #6D3FC2 100%);

  /* Brand blue gradient — CTA identity */
  --grad-blue:         linear-gradient(135deg, #3E73FA 0%, #3CA5FA 100%);
  --grad-blue-horiz:   linear-gradient(90deg,  #3E73FA 0%, #3CA5FA 100%);

  /* Purple-to-blue sweep — hero accents, feature highlights */
  --grad-brand-sweep:  linear-gradient(135deg, #5422BA 0%, #6D3FC2 50%, #3E73FA 100%);
  --grad-brand-sweep-horiz: linear-gradient(90deg, #5422BA 0%, #6D3FC2 50%, #3E73FA 100%);

  /* Tints */
  --grad-orange-tint:  linear-gradient(135deg, rgba(62,115,250,.09) 0%, rgba(60,165,250,.05) 100%);
  --grad-amber-tint:   linear-gradient(135deg, rgba(84,34,186,.10)  0%, rgba(109,63,194,.06) 100%);
  --grad-navy-tint:    linear-gradient(135deg, rgba(30,13,74,.06)   0%, rgba(42,18,96,.09)   100%);
  --grad-white-tint:   linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);

  /* Backward compat */
  --braceai-hero-start:  #160838;
  --braceai-hero-end:    #2A1260;

  /* ── Shadows — purple-keyed ─────────────────────────────── */
  --braceai-shadow-sm:      0 1px 6px rgba(30,13,74,.08);
  --braceai-shadow-md:      0 3px 16px rgba(30,13,74,.12);
  --braceai-shadow-card:    0 2px 14px rgba(30,13,74,.10);
  --braceai-shadow-lg:      0 8px 32px rgba(30,13,74,.16);
  --braceai-shadow-xl:      0 16px 60px rgba(30,13,74,.22);
  --braceai-shadow-modal:   0 16px 60px rgba(30,13,74,.22);
  --braceai-shadow-dark:    0 4px 24px rgba(22,8,56,.42);
  --braceai-shadow-navy:    0 8px 40px rgba(22,8,56,.48);

  /* CTA shadow — only where blue IS the focus */
  --braceai-shadow-cta:     0 6px 24px rgba(62,115,250,.32);
  --braceai-shadow-cta-lg:  0 10px 40px rgba(62,115,250,.38);
  --braceai-shadow-amber:   0 4px 20px rgba(84,34,186,.28);
  --braceai-shadow-float:   0 6px 24px rgba(62,115,250,.32);

  /* Purple glow — for purple-dominant elements */
  --braceai-shadow-purple:     0 6px 24px rgba(84,34,186,.30);
  --braceai-shadow-purple-lg:  0 10px 40px rgba(84,34,186,.36);

  --braceai-shadow-focus:      0 0 0 3px rgba(84,34,186,.20);
  --braceai-shadow-focus-cta:  0 0 0 3px rgba(62,115,250,.28);

  /* ── Border radii ───────────────────────────────────────── */
  --braceai-radius-sm:    8px;
  --braceai-radius-md:    12px;
  --braceai-radius-lg:    16px;
  --braceai-radius-xl:    20px;
  --braceai-radius-2xl:   24px;
  --braceai-radius-3xl:   28px;
  --braceai-radius-pill:  9999px;

  /* ── Layout ─────────────────────────────────────────────── */
  --braceai-sidebar-w:       240px;
  --braceai-header-h:        60px;
  --braceai-bottom-nav-h:    64px;

  /* ── Backward compat — agent/dark-surface chrome ─────────
     agents.js injects styles that reference these tokens;
     they map to current brand values to keep the UI correct. */
  --braceai-orange:     #3E73FA;   /* → brand action blue  */
  --braceai-white:      #ffffff;
  --braceai-text-muted: rgba(255,255,255,0.55);
}

/* ════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES  [data-theme="dark"]
   Switches the light main-content dashboard to a deep-purple
   dark surface. The sidebar is already dark, so only the
   main content area, topbar, cards, and inputs need overrides.
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --braceai-bg:      #0D0520;
  --braceai-surface: #160838;
  --braceai-border:  rgba(255,255,255,0.08);
  --braceai-body:    rgba(255,255,255,0.90);
  --braceai-gray:    rgba(255,255,255,0.45);
  --braceai-gray-400: rgba(255,255,255,0.35);
  --braceai-gray-300: rgba(255,255,255,0.20);
  color-scheme: dark;
}

/* Topbar */
[data-theme="dark"] .braceai-topbar {
  background:    rgba(22,8,56,.94) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
[data-theme="dark"] .braceai-topbar-search input {
  background:   rgba(255,255,255,.05) !important;
  color:        rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .braceai-topbar-search input::placeholder { color: rgba(255,255,255,.28) !important; }
[data-theme="dark"] .braceai-topbar-icon-btn {
  background:   rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color:        rgba(255,255,255,.75) !important;
}
[data-theme="dark"] .braceai-topbar-hamburger { color: rgba(255,255,255,.75) !important; }

/* Main wrap + content */
[data-theme="dark"] .braceai-main-wrap  { background: var(--braceai-bg); }
[data-theme="dark"] .braceai-page-content { background: var(--braceai-bg); }

/* Onboarding nudge */
[data-theme="dark"] .braceai-onboard-nudge {
  background:   rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .braceai-onboard-nudge-title { color: rgba(255,255,255,.85) !important; }
[data-theme="dark"] .braceai-onboard-nudge-sub   { color: rgba(255,255,255,.45) !important; }
[data-theme="dark"] .braceai-onboard-nudge-pct   { color: var(--braceai-brand-light) !important; }

/* Stat cards */
[data-theme="dark"] .braceai-stat-card {
  background:   rgba(255,255,255,.04) !important;
  border:       1px solid rgba(255,255,255,.08) !important;
  box-shadow:   none !important;
}
[data-theme="dark"] .braceai-stat-card-value  { color: #fff !important; }
[data-theme="dark"] .braceai-stat-card-label  { color: rgba(255,255,255,.45) !important; }
[data-theme="dark"] .braceai-stat-card-change.up      { background: rgba(22,163,74,.18)  !important; color: #4ade80 !important; }
[data-theme="dark"] .braceai-stat-card-change.neutral { background: rgba(62,115,250,.12)  !important; color: #93c5fd !important; }
[data-theme="dark"] .braceai-stat-card-change.down    { background: rgba(220,38,38,.18)   !important; color: #f87171 !important; }

/* Tool panel headers */
[data-theme="dark"] .braceai-tool-panel-title { color: #fff !important; }
[data-theme="dark"] .braceai-tool-panel-sub   { color: rgba(255,255,255,.50) !important; }

/* CV input card */
[data-theme="dark"] .braceai-cv-input-card {
  background:   rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .braceai-cv-upload-zone {
  background:   rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}
[data-theme="dark"] .braceai-cv-textarea {
  background:   rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  color:        rgba(255,255,255,.85) !important;
}

/* Profile modal */
[data-theme="dark"] .braceai-profile-modal-backdrop { background: rgba(13,5,32,.80) !important; }
[data-theme="dark"] .braceai-profile-modal {
  background:   #160838 !important;
  border:       1px solid rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .braceai-profile-modal input,
[data-theme="dark"] .braceai-profile-modal select,
[data-theme="dark"] .braceai-profile-modal textarea {
  background:   rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  color:        rgba(255,255,255,.85) !important;
}

/* Trial banner */
[data-theme="dark"] .braceai-trial-banner {
  background:   rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  color:        rgba(255,255,255,.75) !important;
}

/* Bottom nav */
[data-theme="dark"] .braceai-bottom-nav {
  background:   rgba(22,8,56,.96) !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .braceai-bn-item { color: rgba(255,255,255,.45) !important; }
[data-theme="dark"] .braceai-bn-item.active { color: var(--braceai-brand-light) !important; }

/* Strength bars */
[data-theme="dark"] .brace-strength-track { background: rgba(255,255,255,.10) !important; }
[data-theme="dark"] .brace-strength-name  { color: rgba(255,255,255,.50) !important; }
[data-theme="dark"] .brace-strength-label { color: rgba(255,255,255,.70) !important; }

/* ════════════════════════════════════════════════════════════
   CSS RESET
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:              var(--braceai-font-body);
  background:               var(--braceai-bg);
  color:                    var(--braceai-body);
  line-height:              1.6;
  -webkit-font-smoothing:   antialiased;
  overflow-x:               hidden;
}

img {
  max-width: 100%;
  display:   block;
}

a {
  text-decoration: none;
  color:           inherit;
}

/* ════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ════════════════════════════════════════════════════════════ */
@keyframes braceAISpin    { to { transform: rotate(360deg); } }
@keyframes fadeUp         { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer        { 0%   { background-position:-300% center; } 100% { background-position:300% center; } }
@keyframes pulse          { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.55; transform:scale(0.88); } }
@keyframes orb            { 0%,100% { transform:scale(1) translate(0,0); } 40% { transform:scale(1.1) translate(14px,-16px); } 70% { transform:scale(0.93) translate(-10px,10px); } }
@keyframes orbSlow        { 0%,100% { transform:scale(1) translate(0,0); } 50% { transform:scale(1.12) translate(-18px,14px); } }
@keyframes float          { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes flicker        { 0%,90%,100% { opacity:1; } 92%,96% { opacity:0.45; } }
@keyframes ticker         { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes gradShift      { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes scanline       { from { top:-8%; } to { top:108%; } }
@keyframes braceAIPanelIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ════════════════════════════════════════════════════════════
   STAGGERED ENTRY UTILITIES
   ════════════════════════════════════════════════════════════ */
.fu  { animation: fadeUp .55s ease both; }
.fu1 { animation: fadeUp .55s .10s ease both; }
.fu2 { animation: fadeUp .55s .20s ease both; }
.fu3 { animation: fadeUp .55s .32s ease both; }
.fu4 { animation: fadeUp .55s .46s ease both; }
.fu5 { animation: fadeUp .55s .60s ease both; }
.fu6 { animation: fadeUp .55s .75s ease both; }

/* ════════════════════════════════════════════════════════════
   GLOBAL INTERACTIVE STATES
   ════════════════════════════════════════════════════════════ */

/* Buttons */
.btn {
  transition: all .20s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
}
.btn:active { transform: scale(.97) !important; }

.btn-primary:hover    { filter:brightness(1.1); transform:translateY(-2px); box-shadow: var(--braceai-shadow-cta-lg) !important; }
.btn-navy:hover       { background: var(--braceai-navy-600) !important; transform: translateY(-2px); }
.btn-outline:hover    { background: rgba(84,34,186,.06) !important; }
.btn-ghost:hover      { background: var(--braceai-gray-100) !important; }
.btn-ghost-dark:hover { background: rgba(255,255,255,.13) !important; }
.btn-amber:hover      { filter:brightness(1.07); transform:translateY(-2px); box-shadow: var(--braceai-shadow-purple) !important; }

/* Cards */
.card      { transition: all .22s cubic-bezier(.4,0,.2,1); }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(30,13,74,.20) !important; }

.tool-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(30,13,74,.18) !important; }

/* Inputs */
.input { transition: all .18s ease; }
.input:focus {
  outline:      none;
  border-color: var(--braceai-navy-500) !important;
  box-shadow:   var(--braceai-shadow-focus) !important;
}

/* Scrollbar */
::-webkit-scrollbar         { width: 5px; }
::-webkit-scrollbar-thumb   { background: rgba(84,34,186,.30); border-radius: 99px; }
::selection                 { background: rgba(84,34,186,.15); }