/* ==========================================================================
   Turned Up Custom Coatings — Shared Design Tokens
   Sourced from 02_Brand_Kit.md with two adjustments noted below.
   ==========================================================================
   DEVIATIONS FROM BRAND KIT:
   1. Body font: brand kit says "Inter" — using Barlow instead. Barlow is
      inspired by Californian motorsport sign-painting (same DNA as the
      skull/flames logo) and reads as more on-brand than Inter's neutral
      office-UI voice. Swap back in GHL if the client prefers the spec.
   2. Brand-black: #0A0A0A kept but expressed via OKLCH with a warm tint
      (hue 30) so UI surfaces feel subconsciously cohesive with the orange
      accent.
   ========================================================================== */

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

:root {
  /* --- Brand palette (hex = brand kit source of truth, oklch = derived) --- */
  --brand-black: #0A0A0A;          /* primary bg */
  --brand-black-warm: oklch(0.17 0.008 40);   /* section alt, warm-tinted */
  --brand-chrome: #B8B8B8;         /* chrome text base, borders */
  --brand-chrome-dark: #4A4A4A;    /* body on light, chrome shadow */
  --brand-chrome-bright: oklch(0.92 0.003 220); /* highlight on chrome type */
  --brand-orange: #E8491D;         /* primary CTA, flame accents */
  --brand-orange-deep: #B33100;    /* hover, drip accent */
  --brand-orange-ember: oklch(0.72 0.18 45);   /* lighter highlight */
  --brand-blue: #1E6FB8;           /* trust accent, rare */
  --brand-blue-deep: #0C4B86;
  --brand-paper: #F5F5F3;          /* light surface breaks */

  /* --- Semantic aliases (use these in component CSS) --- */
  --bg: var(--brand-black);
  --bg-alt: var(--brand-black-warm);
  --bg-light: var(--brand-paper);
  --fg: var(--brand-chrome);
  --fg-strong: var(--brand-chrome-bright);
  --fg-muted: oklch(0.58 0.008 220);
  --fg-on-light: #1a1a1a;
  --border: oklch(0.28 0.008 40);
  --border-strong: oklch(0.45 0.01 40);
  --accent: var(--brand-orange);
  --accent-deep: var(--brand-orange-deep);

  /* --- Typography --- */
  --font-display: 'Oswald', 'Barlow Condensed', 'Impact', sans-serif;
  --font-display-alt: 'Barlow Condensed', 'Oswald', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Modular scale, 1.333 ratio, fluid via clamp */
  --step--1: clamp(0.80rem, 0.78rem + 0.1vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.44rem + 0.6vw, 2.00rem);
  --step-3:  clamp(1.95rem, 1.75rem + 1.0vw, 2.67rem);
  --step-4:  clamp(2.44rem, 2.10rem + 1.7vw, 3.55rem);
  --step-5:  clamp(3.05rem, 2.50rem + 2.75vw, 4.74rem);
  --step-6:  clamp(3.81rem, 2.95rem + 4.3vw, 6.32rem);

  /* --- Spacing (4pt scale) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* --- Misc --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --container-max: 1280px;
  --body-max: 65ch;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 340ms;
  --dur-slow: 640ms;
}

/* --------------------------------------------------------------------------
   Global reset + base — shared across all three direction stylesheets.
   Direction stylesheets extend/override these.
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0; max-width: var(--body-max); }

/* Chrome text treatment — SVG-based gradient, not background-clip */
.chrome-text {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-chrome);
  text-shadow:
    0 1px 0 oklch(0.95 0.003 220),
    0 -1px 0 oklch(0.22 0.005 220);
  letter-spacing: 0.01em;
}

/* Utility: section padding */
.section {
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Utility: skip link for a11y */
.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  z-index: 999;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible — distinct orange ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}