/* ============================================================
   Greenville Triumph SC — Design System
   colors_and_type.css
   Tokens for three interchangeable themes + typography scale
   ============================================================ */

/* Fonts: Inter + JetBrains Mono — loaded locally from /fonts/ */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- BASE TOKENS (Triumph — default theme) ---------- */
:root,
[data-theme="triumph"] {
  /* Brand accents */
  --accent:        #97D700;   /* Triumph green */
  --accent-dim:    #72B431;
  --accent-2:      #004C97;   /* Supporting navy-blue */
  --accent-2-dim:  #002855;

  /* Surfaces */
  --navy-deep:     #0A1628;
  --navy:          #0F1C33;
  --surface:       #162847;
  --surface-2:     #1C3256;

  /* Foreground */
  --fg-1:          #FFFFFF;
  --fg-2:          rgba(255,255,255,0.72);
  --fg-3:          rgba(255,255,255,0.48);
  --fg-muted:      rgba(255,255,255,0.32);
  --divider:       rgba(255,255,255,0.08);
  --divider-2:     rgba(255,255,255,0.14);

  /* Semantic */
  --bg:            var(--navy-deep);
  --bg-elev:       var(--navy);
  --bg-card:       var(--surface);
  --bg-card-2:     var(--surface-2);
  --brand:         var(--accent);
  --brand-2:       var(--accent-2);
  --focus-ring:    color-mix(in oklch, var(--accent) 60%, transparent);

  /* Type families */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing scale (8pt) */
  --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;
  --space-10: 128px;

  /* Radii — restrained, athletic */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* Elevation — low, flat, rare */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,0.55);
  --shadow-3: 0 24px 48px -16px rgba(0,0,0,0.65);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.06);

  /* Motion — brief, intentional, never autoplay */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;
}

/* ---------- LIBERTY THEME ---------- */
[data-theme="liberty"] {
  --accent:        #FFD100;   /* Liberty yellow, used sparingly */
  --accent-dim:    #D4AD00;
  --accent-2:      #6FA8DC;   /* Light sky blue — supporting */
  --accent-2-dim:  #4A86C5;

  --navy-deep:     #0A1E3F;
  --navy:          #102B5A;
  --surface:       #173976;
  --surface-2:     #1F4790;

  --bg:            var(--navy-deep);
  --bg-elev:       var(--navy);
  --bg-card:       var(--surface);
  --bg-card-2:     var(--surface-2);
  --brand:         var(--accent-2); /* blue is primary in Liberty */
  --brand-2:       var(--accent);   /* yellow is accent */
  --focus-ring:    color-mix(in oklch, var(--accent-2) 60%, transparent);
}

/* ---------- COMBINED THEME (Triumph + Liberty at equal weight) ---------- */
[data-theme="combined"] {
  --accent:        #97D700;
  --accent-dim:    #72B431;
  --accent-2:      #004C97;
  --accent-2-dim:  #002855;

  --navy-deep:     #08152B;
  --navy:          #0D1F3D;
  --surface:       #152E52;
  --surface-2:     #1C3C68;

  --bg:            var(--navy-deep);
  --bg-elev:       var(--navy);
  --bg-card:       var(--surface);
  --bg-card-2:     var(--surface-2);
  --brand:         var(--accent);
  --brand-2:       var(--accent-2);
  --focus-ring:    color-mix(in oklch, var(--accent) 60%, transparent);
}

/* ============================================================
   TYPE SCALE — fluid via clamp()
   ============================================================ */
:root {
  --type-hero-size:    clamp(2.4rem, 1.2rem + 3.8vw, 4.65rem);
  --type-hero-weight:  900;
  --type-hero-track:   -0.025em;
  --type-hero-lh:      1.02;

  --type-section-size:   clamp(1.9rem, 1.1rem + 2.2vw, 3.15rem);
  --type-section-weight: 900;
  --type-section-track:  -0.018em;
  --type-section-lh:     1.08;

  --type-subhead-size:   1.35rem;
  --type-subhead-weight: 700;
  --type-subhead-track:  -0.01em;
  --type-subhead-lh:     1.3;

  --type-body-size:   1rem;
  --type-body-weight: 400;
  --type-body-lh:     1.65;

  --type-mono-size:  1.1rem;
  --type-mono-weight: 500;

  --type-eyebrow-size:   0.72rem;
  --type-eyebrow-weight: 700;
  --type-eyebrow-track:  0.32em;
  --type-eyebrow-lh:     1.2;
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, .hero {
  font-family: var(--font-sans);
  font-size: var(--type-hero-size);
  font-weight: var(--type-hero-weight);
  letter-spacing: var(--type-hero-track);
  line-height: var(--type-hero-lh);
  text-wrap: balance;
  margin: 0;
}

h2, .h2, .section-title {
  font-family: var(--font-sans);
  font-size: var(--type-section-size);
  font-weight: var(--type-section-weight);
  letter-spacing: var(--type-section-track);
  line-height: var(--type-section-lh);
  text-wrap: balance;
  margin: 0;
}

h3, .h3, .subhead {
  font-family: var(--font-sans);
  font-size: var(--type-subhead-size);
  font-weight: var(--type-subhead-weight);
  letter-spacing: var(--type-subhead-track);
  line-height: var(--type-subhead-lh);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  text-wrap: pretty;
  color: var(--fg-2);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-track);
  line-height: var(--type-eyebrow-lh);
  text-transform: uppercase;
  color: var(--brand);
}

.mono, code, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-mono-size);
  font-weight: var(--type-mono-weight);
  letter-spacing: -0.01em;
}

.big-number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 1rem + 6vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--brand);
}

/* Utilities */
.rule       { height: 1px; background: var(--divider); border: 0; }
.rule-brand { height: 2px; background: var(--brand); border: 0; }
.caps       { text-transform: uppercase; letter-spacing: 0.12em; }