/* ULTRAZ Design System — AI Operating System for Fan Economies · Dark-first */
/* All in. */

/* Brand fonts — Archivo Black (display/wordmark) · Inter (body/UI) · JetBrains Mono (labels/data) */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

:root {
  /* ==== BRAND ==== */
  --ultra-violet:   #8B7CF6;   /* THE accent · the network — spokes, nodes, CTAs, links, accent bars */
  --ultra-cyan:     #22D3EE;   /* the core — center of the mark; sparingly elsewhere */
  --void-black:     #0A0E14;   /* default canvas — almost-black, never pure black */
  --paper:          #F0F1F3;   /* text on dark, light backgrounds — never pure white */
  --fan-coral:      #FF7B5C;   /* GOAT's scarf · emotional / live moments only */
  --deep-teal:      #2D8580;   /* teal on light backgrounds, hover states */
  --surface-dark:   #131822;   /* cards and containers on dark canvas */
  --champion-gold:  #FAD089;   /* celebration only — goals, wins, championship signals */
  --violet-deep:    #5B4FC4;   /* mark core on LIGHT backgrounds (cyan loses contrast) */
  --violet-hover:   #6D5FE0;   /* CTA hover / pressed violet */

  --brand-primary:    #8B7CF6;   /* network violet */
  --brand-primary-2:  #6D5FE0;
  --brand-secondary:  #22D3EE;   /* core cyan */
  --brand-secondary-2:#2D8580;   /* deep teal */

  /* ==== LIGHT NEUTRALS (on-light / docs) ==== */
  --n-bg:        #F0F1F3;   /* Paper */
  --n-surface:   #F7F8FA;
  --n-surface-2: #E7E9ED;
  --n-border:    #D5D8DF;
  --n-text:      #0A0E14;   /* Void Black */
  --n-text-2:    #3A4255;
  --n-text-mute: #7C8290;

  /* ==== DARK SURFACES (product default) ==== */
  --bg:        #0A0E14;          /* Void Black canvas */
  --surface-1: #131822;          /* Surface Dark — primary card */
  --surface-2: #1A2030;          /* elevated card */
  --surface-3: #222B3E;          /* hover / nested */
  --surface-4: #2C3650;
  --surface-5: #3A4666;
  --border:        #1E2738;
  --border-hover:  #2A3852;
  --border-strong: #3A4666;

  /* Text on dark — Paper ramp (never pure white) */
  --white: #F0F1F3;
  --text:  #F0F1F3;
  --t2:    #C2C7D2;
  --t3:    #8A91A2;
  --t4:    #5C6479;
  --t5:    #424A5E;

  /* ==== SEMANTIC SCALES ==== */
  /* Violet · primary actions / links / CTA — the network color */
  --blue-50:  #EEEBFE;
  --blue-100: #DAD4FB;
  --blue-500: #8B7CF6;
  --blue-700: #6D5FE0;
  --blue-soft: rgba(139,124,246,0.14);
  --blue-glow: rgba(139,124,246,0.38);

  /* Cyan · the core — live data / real-time accents (sparingly) */
  --cyan-500: #22D3EE;
  --cyan-700: #0E9DB8;
  --cyan-soft: rgba(34,211,238,0.14);

  /* Green · success / positive performance */
  --green-50:  #E8FBF1;
  --green-100: #C6F4DD;
  --green-500: #34D399;
  --green-700: #0E9E6E;
  --green-soft: rgba(52,211,153,0.13);

  /* Coral · live / alert / emotional — Fan Coral */
  --red-50:  #FFEFEA;
  --red-100: #FFDACF;
  --red-500: #FF7B5C;
  --red-700: #E0512F;
  --red-soft: rgba(255,123,92,0.13);

  /* Gold · celebration / championship — Champion Gold */
  --orange-50:  #FEF6E4;
  --orange-100: #FCEBC2;
  --orange-500: #FAD089;
  --orange-700: #D9A23E;
  --orange-soft: rgba(250,208,137,0.14);

  /* Violet · AI / insights / network intelligence */
  --purple-50:  #EEEBFE;
  --purple-100: #DAD4FB;
  --purple-500: #8B7CF6;
  --purple-700: #5B4FC4;
  --purple-soft: rgba(139,124,246,0.16);
  --purple-glow: rgba(139,124,246,0.45);

  /* Semantic aliases */
  --info:    var(--cyan-500);
  --success: var(--green-500);
  --error:   var(--red-500);
  --warn:    var(--orange-500);
  --ai:      var(--purple-500);

  /* ==== DATAVIZ / TEAM SERIES (violet-cyan led) ==== */
  --team-1: #8B7CF6;
  --team-2: #22D3EE;
  --team-3: #34D399;
  --team-4: #FF7B5C;
  --team-5: #FAD089;
  --team-6: #2D8580;
  --team-7: #A78BFA;

  /* ==== TIER ==== */
  --tier-platinum: #C2C7D2;
  --tier-gold:     #FAD089;
  --tier-silver:   #8A91A2;
  --tier-bronze:   #C2895B;

  /* ==== LEGACY ALIASES (keep older pages compiling) ==== */
  --red:       var(--fan-coral);
  --teal:      var(--deep-teal);
  --cyan:      var(--ultra-cyan);
  --violet:    var(--ultra-violet);
  --gold:      var(--champion-gold);
  --orange:    var(--orange-500);
  --coral:     var(--fan-coral);
  --yellow-card: var(--champion-gold);
  --success-soft: var(--green-soft);

  /* ==== RADIUS · B2B (clean, not too soft) ==== */
  --r-card:    14px;
  --r-button:  10px;
  --r-badge:   6px;
  --r-toggle:  999px;
  --r-bar:     3px;
  --r-input:   10px;

  /* ==== RADIUS · Fan / Gen Z (preserved) ==== */
  --r-fan-card:    24px;
  --r-fan-button:  999px;
  --r-fan-chip:    999px;
  --r-fan-tile:    20px;
  --r-fan-sheet:   28px;
  --r-fan-input:   16px;
  --r-fan-media:   20px;

  /* ==== Fan surfaces (preserved · brand colours updated) ==== */
  --fan-bg:        #0A0E14;
  --fan-surface-1: #131822;
  --fan-surface-2: #1A2030;
  --fan-surface-3: #222B3E;
  --fan-grad-hot:    linear-gradient(135deg, var(--ultra-cyan) 0%, var(--ultra-violet) 55%, var(--violet-deep) 100%);
  --fan-grad-cool:   linear-gradient(135deg, var(--ultra-violet) 0%, var(--violet-deep) 100%);
  --fan-grad-night:  linear-gradient(160deg, #1A2030 0%, #0A0E14 100%);
  --fan-glow-red:    0 8px 32px rgba(255, 123, 92, 0.30);
  --fan-glow-orange: 0 8px 32px rgba(139, 124, 246, 0.35);

  /* ==== SHADOWS (dark theme) ==== */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-3: 0 6px 18px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-4: 0 16px 48px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.30);
  --glow-blue:   0 0 0 1px rgba(139,124,246,0.30), 0 8px 24px rgba(139,124,246,0.28);
  --glow-purple: 0 0 0 1px rgba(139,124,246,0.30), 0 8px 24px rgba(139,124,246,0.28);
  --glow-cyan:   0 0 0 1px rgba(34,211,238,0.30), 0 8px 24px rgba(34,211,238,0.25);
  --glow-teal:   0 0 0 1px rgba(45,133,128,0.30), 0 8px 24px rgba(45,133,128,0.25);

  /* ==== TYPE ==== */
  --font-body: 'Inter', system-ui, sans-serif;                  /* body / UI · default */
  --font-head: 'Archivo Black', system-ui, sans-serif;          /* display / headline / wordmark */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;       /* labels / meta / numerics */
  --font-fan:  'Inter', system-ui, sans-serif;                  /* fan / Gen Z body */
  /* Backwards-compat */
  --font-display: var(--font-head);
}

/* Reset for previews */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--t2); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01", "tnum"; }

/* Type primitives — Archivo Black display (ships heavy; do not bold further) */
.h-hero { font-family: var(--font-head); font-weight: 400; font-size: 48px; letter-spacing: -0.5px; color: var(--text); line-height: 1.04; margin: 0; }
.h-1    { font-family: var(--font-head); font-weight: 400; font-size: 32px; letter-spacing: -0.2px; color: var(--text); line-height: 1.1;  margin: 0; }
.h-2    { font-family: var(--font-head); font-weight: 400; font-size: 22px; letter-spacing: 0px;    color: var(--text); line-height: 1.2;  margin: 0; }
.h-3    { font-family: var(--font-head); font-weight: 400; font-size: 16px; letter-spacing: 0.2px;  color: var(--text); line-height: 1.25; margin: 0; }
.h-card { font-family: var(--font-head); font-weight: 400; font-size: 13px; letter-spacing: 0.3px;  color: var(--text); line-height: 1.25; margin: 0; }

.body-lg { font-size: 15px; line-height: 1.6; color: var(--t2); font-family: var(--font-body); }
.body    { font-size: 13.5px; line-height: 1.55; color: var(--t2); font-family: var(--font-body); }
.body-b  { font-size: 13.5px; line-height: 1.55; color: var(--text); font-weight: 600; font-family: var(--font-body); }
.caption { font-size: 12px; color: var(--t3); font-family: var(--font-body); }
.overline { font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--t4); font-family: var(--font-mono); }

/* Numerics — JetBrains Mono with tabular figures */
.stat-value { font-family: var(--font-mono); font-weight: 700; font-size: 32px; letter-spacing: -0.5px; color: var(--text); line-height: 1; font-feature-settings: "tnum"; }
.metric-num { font-family: var(--font-mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* Preview frame chrome */
.frame { padding: 40px 48px; min-height: 100vh; background: var(--bg); }
.frame-title-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.frame-title-row .meta { color: var(--t4); font-size: 12px; font-family: var(--font-mono); }
.section-divider { height: 1px; background: var(--border); margin: 32px 0; }

/* Utility */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.center { display: flex; align-items: center; justify-content: center; }
.aic { align-items: center; }
.jcsb { justify-content: space-between; }

/* ==== B2B base components (used across pages) ==== */

/* Buttons — primary violet · solid, glowing on hover */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-button); font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.1px; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease; line-height: 1; height: 36px; }
.btn-primary { background: var(--ultra-violet); color: var(--void-black); border-color: var(--ultra-violet); }
.btn-primary:hover { background: var(--violet-hover); box-shadow: var(--glow-purple); }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-3); border-color: var(--surface-5); }
.btn-ghost { background: transparent; color: var(--t2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--fan-coral); color: var(--void-black); border-color: var(--fan-coral); }
.btn-danger:hover { background: var(--red-700); }
.btn-ai { background: linear-gradient(135deg, var(--ultra-violet) 0%, var(--ultra-cyan) 100%); color: var(--void-black); border-color: transparent; }
.btn-ai:hover { box-shadow: var(--glow-purple); filter: brightness(1.06); }
.btn-sm { height: 28px; padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn-lg { height: 44px; padding: 12px 22px; font-size: 14px; }

/* Inputs */
.input { background: var(--surface-1); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-input); padding: 9px 12px; font-family: var(--font-body); font-size: 13px; transition: border 0.15s ease, box-shadow 0.15s ease; height: 36px; }
.input:focus { outline: none; border-color: var(--ultra-violet); box-shadow: 0 0 0 3px var(--blue-soft); }
.input::placeholder { color: var(--t4); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--r-badge); font-family: var(--font-body); font-weight: 600; font-size: 10.5px; letter-spacing: 0.3px; line-height: 1; }
.badge-blue   { background: var(--blue-soft);   color: var(--ultra-violet); }
.badge-cyan   { background: var(--cyan-soft);   color: var(--cyan-700); }
.badge-green  { background: var(--green-soft);  color: var(--green-500); }
.badge-red    { background: var(--red-soft);    color: var(--red-500); }
.badge-orange { background: var(--orange-soft); color: var(--orange-700); }
.badge-purple { background: var(--purple-soft); color: var(--purple-500); }
.badge-mono   { background: var(--surface-2);   color: var(--t2); border: 1px solid var(--border); font-family: var(--font-mono); font-weight: 500; }

/* Card */
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); }

/* Live dot — Fan Coral */
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fan-coral); animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,123,92,0.55); } 70% { box-shadow: 0 0 0 6px rgba(255,123,92,0); } }

/* Performance arrows */
.delta-up   { color: var(--green-500); font-family: var(--font-mono); font-weight: 600; }
.delta-down { color: var(--fan-coral); font-family: var(--font-mono); font-weight: 600; }