/* ============================================================
   SHIFTER SOCIALS — Colors & Type foundation
   Brand: bold automotive / motorsport energy. Black · White · Red.
   ------------------------------------------------------------
   FONT NOTE: the "SHIFTER" wordmark in the logo is a custom
   condensed heavy italic. The nearest Google Fonts match is
   Saira Condensed (Black/Heavy Italic). If you own the original
   typeface, drop the files in /fonts and override --font-display.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Saira:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --red:            #FF3131;   /* signature accent — the "S" in the gate */
  --red-hover:      #E81E1E;   /* darker red for hover */
  --red-press:      #C81616;   /* pressed */
  --red-soft:       #FFE3E3;   /* tint backgrounds */
  --black:          #0A0A0A;   /* near-black ink (softer than pure) */
  --true-black:     #000000;   /* logo black / max contrast surfaces */
  --white:          #FFFFFF;

  /* ---------- NEUTRAL RAMP (cool-neutral) ---------- */
  --n-0:   #FFFFFF;
  --n-50:  #F6F6F7;
  --n-100: #ECECEE;
  --n-200: #DEDEE1;
  --n-300: #C7C7CC;
  --n-400: #9A9AA1;
  --n-500: #6F6F77;
  --n-600: #4E4E55;
  --n-700: #343438;
  --n-800: #1E1E21;
  --n-900: #0A0A0A;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:            var(--white);
  --bg-muted:      var(--n-50);
  --surface:       var(--white);
  --surface-2:     var(--n-50);
  --surface-dark:  var(--true-black);
  --border:        var(--n-200);
  --border-strong: var(--n-300);

  /* ---------- SEMANTIC TEXT ---------- */
  --fg1: var(--black);     /* primary text */
  --fg2: var(--n-600);     /* secondary text */
  --fg3: var(--n-400);     /* muted / captions */
  --fg-on-dark:   #FFFFFF;
  --fg-on-dark-2: #B9B9C0;
  --fg-on-accent: #FFFFFF;

  /* ---------- ACCENT (interactive) ---------- */
  --accent:        var(--red);
  --accent-hover:  var(--red-hover);
  --accent-press:  var(--red-press);
  --on-accent:     #FFFFFF;
  --focus-ring:    color-mix(in srgb, var(--red) 55%, transparent);

  /* ---------- STATUS ---------- */
  --success: #16A34A;
  --warning: #F59E0B;
  --error:   #E81E1E;
  --info:    #2563EB;

  /* ============================================================
     TYPE
     ============================================================ */
  --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-label:   "Saira", system-ui, sans-serif;

  /* fluid display scale (sporty, condensed, often italic) */
  --display-xl: 900 clamp(64px, 9vw, 132px)/0.9 var(--font-display);
  --display:    900 clamp(48px, 6vw, 92px)/0.92 var(--font-display);
  --h1:         800 clamp(38px, 4.4vw, 64px)/0.96 var(--font-display);
  --h2:         800 clamp(28px, 3vw, 44px)/1.0 var(--font-display);
  --h3:         700 clamp(22px, 2vw, 30px)/1.05 var(--font-display);

  /* body */
  --body-lg: 400 19px/1.6 var(--font-body);
  --body:    400 16px/1.6 var(--font-body);
  --body-sm: 400 14px/1.55 var(--font-body);
  --caption: 500 12px/1.4 var(--font-body);

  /* eyebrow / label — uppercase, tracked, sporty */
  --eyebrow: 600 13px/1 var(--font-label);
  --eyebrow-tracking: 0.18em;

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(10,10,10,.06), 0 1px 3px rgba(10,10,10,.08);
  --shadow-md: 0 4px 12px rgba(10,10,10,.08), 0 2px 4px rgba(10,10,10,.06);
  --shadow-lg: 0 18px 40px rgba(10,10,10,.14), 0 6px 12px rgba(10,10,10,.08);
  --shadow-red: 0 10px 30px rgba(255,49,49,.30);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS  (opt-in via .ss-scope or :root)
   ============================================================ */
.ss-scope, body.ss-body {
  font: var(--body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ss-scope h1, .h1 { font: var(--h1); letter-spacing: -0.01em; margin: 0; }
.ss-scope h2, .h2 { font: var(--h2); letter-spacing: -0.005em; margin: 0; }
.ss-scope h3, .h3 { font: var(--h3); margin: 0; }
.display-xl { font: var(--display-xl); letter-spacing: -0.02em; text-transform: uppercase; }
.display    { font: var(--display); letter-spacing: -0.015em; text-transform: uppercase; }

.italic-go { font-style: italic; }       /* the racing slant — use on power words */

.eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
}
.lead   { font: var(--body-lg); color: var(--fg2); }
.muted  { color: var(--fg3); }
.caption{ font: var(--caption); color: var(--fg3); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--red); color: #fff; }