/* ============================================================
   OverDrive Live — Design System Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Brand font — Blue Highway CD (condensed display) */
@font-face {
  font-family: 'Blue Highway';
  src: url('fonts/blue_highway_cd.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   COLOR TOKENS — Base Palette
   ============================================================ */
:root {
  /* Brand Red */
  --odl-red:           #C41E1E;
  --odl-red-dark:      #991616;
  --odl-red-light:     #E02020;
  --odl-red-subtle:    rgba(196, 30, 30, 0.15);

  /* Neutrals — Dark to Light */
  --odl-black:         #0A0A0A;
  --odl-dark:          #1A1A1A;
  --odl-mid:           #2C2C2C;
  --odl-border:        #3A3A3A;
  --odl-grey:          #6B6B6B;
  --odl-light-grey:    #ADADAD;
  --odl-off-white:     #F0F0F0;
  --odl-white:         #FFFFFF;

  /* Semantic Colours */
  --color-bg:          var(--odl-black);
  --color-surface:     var(--odl-dark);
  --color-surface-alt: var(--odl-mid);
  --color-border:      var(--odl-border);
  --color-accent:      var(--odl-red);
  --color-accent-hover:var(--odl-red-dark);

  /* Text */
  --color-text-primary:   var(--odl-white);
  --color-text-secondary: var(--odl-off-white);
  --color-text-muted:     var(--odl-light-grey);
  --color-text-disabled:  var(--odl-grey);
  --color-text-accent:    var(--odl-red);

  /* Status */
  --color-live:        #C41E1E;
  --color-live-pulse:  rgba(196, 30, 30, 0.4);
  --color-success:     #2ECC71;
  --color-warning:     #F39C12;
  --color-error:       #C41E1E;

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  /* Font Families */
  --font-display:   'Blue Highway', 'Arial Narrow', sans-serif;
  --font-body:      'Barlow', 'Arial', sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Font Sizes — Type Scale (1.25 ratio) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3.5rem;     /* 56px */
  --text-5xl:   5rem;       /* 80px */

  /* Font Weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.12em;

  /* ============================================================
     SPACING TOKENS
     ============================================================ */
  --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-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.6);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.7);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.8);
  --shadow-accent: 0 0 20px rgba(196, 30, 30, 0.35);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-width:        1280px;
  --gutter:           24px;
  --nav-height:       72px;
}

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

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

h5 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

h6 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

p.lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  color: var(--color-text-secondary);
}

a {
  color: var(--odl-red);
  text-decoration: none;
}
a:hover {
  color: var(--odl-red-light);
  text-decoration: underline;
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--odl-light-grey);
  background: var(--odl-mid);
  border-radius: var(--radius-md);
  padding: 0.2em 0.4em;
}

/* Label / Caption / Overline */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--odl-red);
}

/* ============================================================
   LIVE BADGE
   ============================================================ */
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--odl-red);
  color: var(--odl-white);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-sm);
}

.badge-live::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  background: var(--odl-white);
  border-radius: 50%;
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ============================================================
   SPEED LINE DIVIDER
   ============================================================ */
.speed-line {
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--odl-red) 40%, var(--odl-red) 85%, transparent 100%);
}