/* ============================================================
   TeamTipp — Design system tokens
   Mirrors apps/app/constants/Colors.ts and the design system guide.
   ============================================================ */

:root {
  /* ---- Brand scales -------------------------------------- */
  --navy-50:  #e8edf5;
  --navy-100: #c5d0e6;
  --navy-200: #9eb0d5;
  --navy-300: #7490c4;
  --navy-400: #5478b8;
  --navy-500: #3460ab;
  --navy-600: #2a509a;
  --navy-700: #1e3d80;
  --navy-800: #142c65;
  --navy-900: #0f1f3d;
  --navy-950: #091529;

  --blue-brand: #1a56db;
  --blue-light: #3b82f6;

  --gold:   #f59e0b;
  --silver: #9ca3af;
  --bronze: #b45309;

  /* ---- Semantic ------------------------------------------ */
  --success-light: #16a34a;
  --success-dark:  #22c55e;
  --error-light:   #dc2626;
  --error-dark:    #ef4444;
  --warning-light: #d97706;
  --warning-dark:  #f59e0b;

  /* ---- LIGHT mode tokens --------------------------------- */
  --bg:           #ffffff;
  --bg-card:      #f3f4f6;
  --bg-surface:   #ffffff;
  --border:       #e5e7eb;
  --fg:           #0f1f3d;
  --fg-secondary: #6b7280;
  --fg-muted:     #9ca3af;
  --primary:      #1a56db;
  --primary-dark: #0f1f3d;
  --accent:       #1a56db;
  --success:      #16a34a;
  --error:        #dc2626;
  --warning:      #d97706;

  /* ---- Radii -------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ---- Shadows ------------------------------------------ */
  --shadow-card: 0 2px 8px rgba(15, 31, 61, 0.08);
  --shadow-elev: 0 4px 20px rgba(15, 31, 61, 0.12);
  --shadow-glow: 0 4px 20px rgba(26, 86, 219, 0.35);

  /* ---- Spacing ------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Type system -------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Noto Sans", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                  "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;

  --type-title-size:       28px;
  --type-title-lh:         34px;
  --type-title-weight:     700;
  --type-heading-size:     20px;
  --type-heading-lh:       26px;
  --type-heading-weight:   700;
  --type-subheading-size:  16px;
  --type-subheading-lh:    22px;
  --type-subheading-weight: 600;
  --type-body-size:        15px;
  --type-body-lh:          22px;
  --type-body-weight:      400;
  --type-caption-size:     13px;
  --type-caption-lh:       18px;
  --type-caption-weight:   400;
  --type-score-size:       30px;
  --type-score-weight:     900;
  --type-result-size:      26px;
  --type-result-weight:    800;
}

/* ---- DARK mode ----------------------------------------- */
[data-theme="dark"], .dark {
  --bg:           #091529;
  --bg-card:      #0f1f3d;
  --bg-surface:   #142c65;
  --border:       #1e3d80;
  --fg:           #f9fafb;
  --fg-secondary: #d1d5db;
  --fg-muted:     #9ca3af;
  --primary:      #3b82f6;
  --primary-dark: #1a56db;
  --accent:       #3b82f6;
  --success:      #22c55e;
  --error:        #ef4444;
  --warning:      #f59e0b;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-elev: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 4px 20px rgba(59, 130, 246, 0.35);
}

/* ---- Base element styles ------------------------------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--type-title-size);
  line-height: var(--type-title-lh);
  font-weight: var(--type-title-weight);
  letter-spacing: -0.3px;
  color: var(--fg);
  margin: 0;
}
h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-lh);
  font-weight: var(--type-heading-weight);
  color: var(--fg);
  margin: 0;
}
h3 {
  font-size: var(--type-subheading-size);
  line-height: var(--type-subheading-lh);
  font-weight: var(--type-subheading-weight);
  color: var(--fg);
  margin: 0;
}
p, .body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: var(--type-body-weight);
  color: var(--fg);
  margin: 0;
}
small, .caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  font-weight: var(--type-caption-weight);
  color: var(--fg-secondary);
}
.muted { color: var(--fg-muted); }
.brand-wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.3px; }
code, pre { font-family: var(--font-mono); }