/* ============================================================
   Superior Industry Solutions - design tokens
   Locked 2026-08-03. Reasons for every value are in DESIGN.md.

   Brand navy came off 7,376 px of their own logo wordmark.
   Safety yellow came off the bollards in their own project photos.
   Surfaces are set per direction, because 01 is dark, 02 is white
   and 03 is steel, and one surface scale across all three would
   flatten the set.
   ============================================================ */

:root {
  /* brand - measured, not chosen */
  --brand: #2E3B50;        /* the SUPERIOR wordmark */
  --brand-hi: #5A7196;     /* lifted so it passes AA on a dark ground */
  --brand-lo: #1B2431;     /* wells and image backdrops */
  --brand-glow: 46, 59, 80;

  /* action - safety yellow off their own bollards. Actions only. */
  --cta: #F0B800;
  --cta-hi: #FFCB2E;
  --cta-ink: #1A1204;
  --cta-glow: 240, 184, 0;

  /* steel - the diamond plate field in their logo, four measured tones */
  --steel-1: #C8C8C9;
  --steel-2: #999B9D;
  --steel-3: #696B6E;
  --steel-4: #3B3C3E;

  /* status */
  --ok: #3FA76A;
  --warn: #D9822B;
  --stop: #C4342E;         /* the red lens on the traffic light in their garage photo */

  /* type */
  --f-anton: 'Anton', 'Arial Narrow', system-ui, sans-serif;
  --f-archivo: 'Archivo Black', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: .18s;
  --slow: .5s;

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 14px;

  --wrap: 1220px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Hazard stripe, six lines of CSS, built from their own bollard yellow.
   Used as a divider on 01. */
.hazard {
  height: 8px;
  background: repeating-linear-gradient(135deg,
    var(--cta) 0 14px, var(--cta-ink) 14px 28px);
}

/* Every tap target on every direction clears 48px. A thumb is not a mouse. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 14px 26px;
  background: var(--cta); color: var(--cta-ink); border: none; border-radius: var(--r-sm);
  font-weight: 800; font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  transition: transform var(--fast) var(--ease), background var(--fast), box-shadow var(--fast);
}
.btn:hover { background: var(--cta-hi); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: 3px; }

/* Photo frames. Each direction picks one behavior and holds it. */
.ph { position: relative; overflow: hidden; background: var(--brand-lo); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 4 / 3; }
.ph--pano { aspect-ratio: 16 / 9; }
.ph--square { aspect-ratio: 1; }

/* The flag saying which direction this is, with a way back to the chooser. */
.mockup-flag {
  position: fixed; left: 0; bottom: 0; z-index: 999;
  display: flex; align-items: center; gap: 10px;
  background: rgba(14,18,24,.93); backdrop-filter: blur(10px);
  border-top: 2px solid var(--cta);
  border-radius: 0 var(--r) 0 0; padding: 6px 14px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #9AA3AE;
}
.mockup-flag b { color: var(--cta); font-weight: 700; }
.mockup-flag a { color: #fff; border-left: 1px solid #39414C; padding-left: 12px; min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}