/* ============================================================
MIDWEST FIRE — Design Tokens
colors_and_type.css
============================================================ */
/* ── Google Fonts ──
Loaded via + in each page's
(not @import here). A CSS @import is render-blocking and chains an
extra round-trip behind tokens.css, which hurts First Contentful Paint. */
/* ============================================================
COLOR TOKENS
============================================================ */
:root {
/* Base Palette */
--color-red-900: #7A0909;
--color-red-800: #A50E0E;
--color-red-700: #CC1111; /* ← Brand Red (primary) */
--color-red-600: #E01414;
--color-red-500: #F03030;
--color-dark-950: #0A0C0F;
--color-dark-900: #0F1214; /* ← Primary background */
--color-dark-800: #171C22;
--color-dark-700: #222830; /* ← Card/surface background */
--color-dark-600: #2E3540;
--color-dark-500: #3D4655;
--color-gray-400: #4A5060; /* Dividers, inactive */
--color-gray-300: #6E788A;
--color-gray-200: #9099AA;
--color-gray-100: #B0B8C4; /* Secondary text */
--color-gray-050: #D4DAE3;
--color-white: #FFFFFF;
--color-black: #000000;
--color-gold-400: #E8B84B; /* Accent / callout */
--color-gold-300: #F2CA6A;
/* ── Semantic Color Roles ── */
--bg-primary: var(--color-dark-900);
--bg-secondary: var(--color-dark-700);
--bg-tertiary: var(--color-dark-600);
--bg-inverse: var(--color-white);
--fg-primary: var(--color-white);
--fg-secondary: var(--color-gray-100);
--fg-tertiary: var(--color-gray-300);
--fg-disabled: var(--color-gray-400);
--fg-inverse: var(--color-dark-900);
--accent-primary: var(--color-red-700);
--accent-hover: var(--color-red-600);
--accent-press: var(--color-red-800);
--accent-muted: rgba(204, 17, 17, 0.15);
--accent-gold: var(--color-gold-400);
--border-default: var(--color-dark-600);
--border-accent: var(--color-red-700);
--border-subtle: rgba(255,255,255,0.08);
--status-success: #3DBD6F;
--status-warning: #E8B84B;
--status-error: #E03030;
--status-info: #5599FF;
/* ============================================================
TYPOGRAPHY TOKENS
============================================================ */
/* Font Families */
--font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
--font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
--font-body: 'Barlow', 'Helvetica Neue', sans-serif;
--font-mono: 'Roboto Mono', 'Courier New', monospace;
/* Font Sizes — base 16px */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
--text-7xl: 4.5rem; /* 72px */
--text-8xl: 6rem; /* 96px */
--text-9xl: 8rem; /* 128px */
/* Font Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Line Heights */
--leading-none: 1;
--leading-tight: 1.05;
--leading-snug: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 1.75;
/* Letter Spacing */
--tracking-tight: -0.01em;
--tracking-normal: 0em;
--tracking-wide: 0.04em;
--tracking-wider: 0.08em;
--tracking-widest: 0.14em;
/* ============================================================
SPACING TOKENS
============================================================ */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* ============================================================
BORDERS & RADIUS
============================================================ */
--radius-none: 0px;
--radius-sm: 2px;
--radius-md: 4px; /* max used — inputs only */
--radius-full: 9999px; /* pill — never used in this brand */
--border-width-thin: 1px;
--border-width-default: 2px;
--border-width-thick: 4px;
/* ============================================================
SHADOWS & ELEVATION
============================================================ */
--shadow-none: none;
--shadow-inset-accent: inset 0 0 0 1px rgba(204,17,17,0.4);
--shadow-glow-red: 0 0 20px rgba(204,17,17,0.25);
--shadow-glow-subtle: 0 2px 16px rgba(0,0,0,0.5);
/* ============================================================
TRANSITIONS
============================================================ */
--ease-default: ease;
--duration-fast: 150ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--transition-base: all var(--duration-base) var(--ease-default);
}
/* ============================================================
SEMANTIC TYPE ELEMENTS
============================================================ */
h1, .h1 {
font-family: var(--font-display);
font-size: var(--text-8xl);
line-height: var(--leading-none);
letter-spacing: var(--tracking-wide);
color: var(--fg-primary);
text-transform: uppercase;
}
h2, .h2 {
font-family: var(--font-display);
font-size: var(--text-6xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-wide);
color: var(--fg-primary);
text-transform: uppercase;
}
h3, .h3 {
font-family: var(--font-condensed);
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-wide);
color: var(--fg-primary);
text-transform: uppercase;
}
h4, .h4 {
font-family: var(--font-condensed);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-wider);
color: var(--fg-primary);
text-transform: uppercase;
}
h5, .h5 {
font-family: var(--font-condensed);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
color: var(--fg-secondary);
text-transform: uppercase;
}
p, .body {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-relaxed);
color: var(--fg-secondary);
}
.body-sm {
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--fg-tertiary);
}
.label {
font-family: var(--font-condensed);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--fg-tertiary);
}
code, .mono {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--accent-gold);
background: var(--bg-secondary);
padding: 2px 6px;
border-radius: var(--radius-sm);
}
a {
color: var(--accent-primary);
text-decoration: none;
transition: var(--transition-base);
}
a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* ============================================================
BASE RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg-primary);
color: var(--fg-primary);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
}