/* Forge · tokens · genre: industrial-minimal · theme: OEC navy + red
 * Oilfield Electric & Motor / OEC Electrical, design tokens (OKLCH, 4pt scale)
 * Type: Big Shoulders Display (industrial condensed) + IBM Plex Sans + Inter (labels).
 * Brand: navy #1f2d52, red #e31e26. No em dashes anywhere in this project.
 */

:root {
  /* ---- Paper / surfaces (cool near-white, navy-tinted) ---- */
  --color-paper:        oklch(98.8% 0.003 262);
  --color-paper-2:      oklch(96.6% 0.006 262);
  --color-paper-3:      oklch(93.8% 0.010 262);

  /* ---- Brand navy (matches logo #1f2d52) ---- */
  --color-navy:         oklch(29% 0.072 267);
  --color-navy-deep:    oklch(23% 0.066 267);
  --color-ink-block:    oklch(29% 0.072 267);
  --color-scrim:        oklch(20% 0.06 267 / 0.62);  /* photo overlay */

  /* ---- Rules / borders ---- */
  --color-rule:         oklch(89% 0.010 262);
  --color-rule-strong:  oklch(79% 0.016 264);

  /* ---- Text ---- */
  --color-ink:          oklch(26% 0.060 266);  /* primary, brand navy near-black */
  --color-ink-soft:     oklch(37% 0.050 266);
  --color-muted:        oklch(49% 0.036 266);  /* secondary text */
  --color-neutral:      oklch(61% 0.026 266);  /* faint labels, icon strokes */
  --color-on-dark:      oklch(96% 0.008 262);  /* text on navy fills */
  --color-on-dark-soft: oklch(80% 0.018 264);
  --color-on-accent:    oklch(98.5% 0.010 262);

  /* ---- Accent (brand red #e31e26) ---- */
  --color-accent:       oklch(56% 0.210 27);
  --color-accent-strong:oklch(50% 0.215 27);
  --color-accent-soft:  oklch(93% 0.052 27);
  --color-focus:        oklch(55% 0.215 27);

  /* ---- Status (form states) ---- */
  --color-error:        oklch(50% 0.200 22);
  --color-error-soft:   oklch(94% 0.045 22);
  --color-success:      oklch(52% 0.110 150);
  --color-success-soft: oklch(94% 0.040 150);

  /* ---- Fonts (2 + 1) ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Type scale (condensed display runs large) ---- */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  --text-4xl:   4rem;
  --text-display:  clamp(3.25rem, 8vw + 0.5rem, 7rem);
  --text-section:  clamp(2.6rem, 5.2vw + 0.5rem, 4.75rem);

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

  /* ---- Radii (industrial = tighter corners) ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- Easings ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Durations ---- */
  --dur-fast: 140ms;
  --dur-mid:  280ms;
  --dur-slow: 600ms;

  /* ---- Shadows (navy-tinted) ---- */
  --shadow-sm:  0 1px 2px oklch(25% 0.04 264 / 0.08);
  --shadow-md:  0 12px 34px oklch(25% 0.05 264 / 0.12);
  --shadow-lg:  0 24px 60px oklch(23% 0.05 264 / 0.22);
  --shadow-nav: 0 6px 24px oklch(25% 0.05 264 / 0.10);

  /* ---- Layout ---- */
  --maxw:   1200px;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --header-h: 62px;
}