/* ============================================================
   RadarB2B — Design Tokens
   Import in any RadarB2B artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* Geist (brand font) + JetBrains Mono fallback */
@font-face {
  font-family: 'Geist';
  src: url("/static/fonts/Geist-Regular.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLORS — RAW PALETTE ---------- */

  /* Primary — Indigo (action, brand, focus) */
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;  /* primary base */
  --indigo-700: #4338CA;  /* hover */
  --indigo-800: #3730A3;  /* pressed */
  --indigo-900: #312E81;

  /* Geo Radar — Blue */
  --geo-50:  #EFF6FF;
  --geo-100: #DBEAFE;
  --geo-500: #3B82F6;
  --geo-600: #2563EB;  /* base */
  --geo-700: #1D4ED8;
  --geo-900: #1E3A8A;

  /* UGC Radar — Pink/Magenta */
  --ugc-50:  #FDF2F8;
  --ugc-100: #FCE7F3;
  --ugc-500: #EC4899;
  --ugc-600: #DB2777;  /* base */
  --ugc-700: #BE185D;
  --ugc-900: #831843;

  /* Pro Radar — Teal */
  --pro-50:  #F0FDFA;
  --pro-100: #CCFBF1;
  --pro-500: #14B8A6;
  --pro-600: #0D9488;  /* base */
  --pro-700: #0F766E;
  --pro-900: #134E4A;

  /* Neutrals */
  --gray-50:  #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #E4E4E7;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1AA;
  --gray-500: #71717A;
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #18181B;
  --gray-950: #09090B;

  /* Semantic */
  --success-50:  #F0FDF4;
  --success-100: #DCFCE7;
  --success-600: #16A34A;
  --success-700: #15803D;

  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-600: #F59E0B;
  --warning-700: #D97706;

  --danger-50:  #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;

  /* ---------- SEMANTIC TOKENS — LIGHT ---------- */
  --bg:           var(--gray-50);
  --bg-elevated:  #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    var(--gray-50);
  --surface-hover: var(--gray-100);

  --border:       var(--gray-200);
  --border-strong: var(--gray-300);

  --fg:           var(--gray-900);
  --fg-2:         var(--gray-600);
  --fg-3:         var(--gray-400);
  --fg-inverse:   #FFFFFF;

  --accent:       var(--indigo-600);
  --accent-hover: var(--indigo-700);
  --accent-press: var(--indigo-800);
  --accent-soft:  var(--indigo-50);
  --accent-on:    #FFFFFF;

  /* Module accents (alias, easy switching) */
  --geo:    var(--geo-600);
  --ugc:    var(--ugc-600);
  --pro:    var(--pro-600);
  --geo-soft: var(--geo-50);
  --ugc-soft: var(--ugc-50);
  --pro-soft: var(--pro-50);

  --success: var(--success-600);
  --warning: var(--warning-600);
  --danger:  var(--danger-600);
  --success-soft: var(--success-50);
  --warning-soft: var(--warning-50);
  --danger-soft:  var(--danger-50);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px) */
  --text-h1: 28px;
  --text-h2: 22px;
  --text-h3: 17px;
  --text-body: 14px;
  --text-small: 11px;
  --text-eyebrow: 11px;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---------- SPACING (4 px scale) ---------- */
  --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-14: 56px;
  --space-20: 80px;

  /* ---------- RADII ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 1px rgb(0 0 0 / 0.03);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 1px rgb(0 0 0 / 0.03);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 20px 40px rgb(0 0 0 / 0.16), 0 8px 16px rgb(0 0 0 / 0.06);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- LAYOUT ---------- */
  --header-h: 56px;
  --header-h-desktop: 64px;
  --bottom-nav-h: 64px;
  --container-max: 1280px;
}

/* ---------- DARK MODE ---------- */
[data-theme="dark"], .dark {
  --bg:           var(--gray-950);
  --bg-elevated:  var(--gray-900);
  --surface:      var(--gray-900);
  --surface-2:    var(--gray-800);
  --surface-hover: var(--gray-800);

  --border:       var(--gray-800);
  --border-strong: var(--gray-700);

  --fg:           var(--gray-50);
  --fg-2:         var(--gray-400);
  --fg-3:         var(--gray-500);
  --fg-inverse:   var(--gray-900);

  --accent:       var(--indigo-500);
  --accent-hover: var(--indigo-400);
  --accent-press: var(--indigo-600);
  --accent-soft:  rgb(99 102 241 / 0.15);

  --geo-soft: rgb(37 99 235 / 0.15);
  --ugc-soft: rgb(219 39 119 / 0.15);
  --pro-soft: rgb(13 148 136 / 0.15);

  --success-soft: rgb(22 163 74 / 0.15);
  --warning-soft: rgb(245 158 11 / 0.15);
  --danger-soft:  rgb(220 38 38 / 0.15);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 20px 40px rgb(0 0 0 / 0.6);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: var(--text-h1); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--fg); }
h2 { font-size: var(--text-h2); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.015em; color: var(--fg); }
h3 { font-size: var(--text-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--fg); }
p  { font-size: var(--text-body); line-height: var(--lh-normal); color: var(--fg); }
small { font-size: var(--text-small); line-height: var(--lh-snug); color: var(--fg-2); }

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Tabular numerals — apply to .num, stats, scores */
.num, .tnum, .stat, [data-num] {
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  font-variant-numeric: tabular-nums;
}

code, pre {
  font-family: var(--font-mono);
  font-size: 13px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Focus visible everywhere */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-md);
}

/* Selection */
::selection { background: var(--accent-soft); color: var(--accent); }