/* Singh Fabrication · design tokens
 * Every colour, font, size, space, easing and duration used by site.css lives here.
 * Palette is anchored on the brand navy (hue 262) with the brand red as the single accent.
 */
:root {
  /* Paper and ink — cool, tinted toward navy */
  --color-paper:        oklch(98.4% 0.004 262);
  --color-paper-2:      oklch(95.6% 0.008 262);
  --color-paper-3:      oklch(92.4% 0.011 262);
  --color-rule-2:       oklch(89.5% 0.011 262);
  --color-rule:         oklch(82% 0.014 262);
  --color-muted:        oklch(49% 0.02 262);
  --color-ink-2:        oklch(35% 0.026 262);
  --color-ink:          oklch(21% 0.032 262);

  /* Brand navy surface (details band, primary button) */
  --color-navy:         oklch(25% 0.075 262);
  --color-navy-2:       oklch(30.5% 0.075 262);
  --color-navy-rule:    oklch(40% 0.06 262);
  --color-navy-3:       oklch(27.5% 0.075 262);
  --color-navy-grid:    oklch(32% 0.07 262);
  --color-on-navy:      oklch(96% 0.008 262);
  --color-on-navy-2:    oklch(80% 0.028 262);
  --color-blueprint:    oklch(90% 0.03 250);
  --color-navy-glow:    oklch(35% 0.095 258);
  --overlay-glass:      oklch(22% 0.07 262 / 0.68);
  --overlay-glass-edge: oklch(70% 0.04 262 / 0.22);
  --overlay-glass-strong: oklch(20% 0.07 262 / 0.95);
  --overlay-hover:      oklch(100% 0 0 / 0.08);
  --overlay-active:     oklch(100% 0 0 / 0.13);
  --color-accent-hover: oklch(50% 0.2 27);
  --color-accent-bright: oklch(68% 0.19 27);

  /* Steel nameplate (echoes the plate on the printed creative) */
  --color-steel-1:      oklch(94% 0.007 255);
  --color-steel-2:      oklch(83.5% 0.012 255);
  --color-steel-hi:     oklch(98.5% 0.004 255);
  --color-steel-rule:   oklch(74% 0.014 255);
  --color-bolt:         oklch(60% 0.012 255);
  --color-bolt-hi:      oklch(90% 0.006 255);
  --overlay-sheen:      oklch(100% 0 0 / 0.05);

  /* Brand red — the one accent. Logo, markers, focus, one dimension line. */
  --color-accent:       oklch(55% 0.2 27);
  --color-accent-ink:   oklch(98.4% 0.004 262);
  --color-focus:        oklch(56% 0.22 27);
  --color-focus-dark:   oklch(74% 0.17 27);
  --color-success:      oklch(48% 0.12 150);
  --color-error:        oklch(50% 0.19 27);

  /* Type */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --text-sm:      0.875rem;
  --text-base:    1.0625rem;
  --text-md:      1.3125rem;
  --text-xl:      clamp(1.75rem, 2.2vw + 1rem, 2.5rem);
  --text-display: clamp(2.4rem, 4.4vw + 1rem, 4.6rem);

  --wdth-display: 118;
  --wdth-wordmark: 125;

  /* Space — 4 pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --page-max:    76rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --head-h:      72px;

  /* Lines, radii, depth */
  --rule-hair:  1px;
  --rule-bold:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --shadow-whisper: 0 1px 2px oklch(21% 0.032 262 / 0.06);
  --shadow-card:    0 24px 48px -28px oklch(21% 0.04 262 / 0.38);
  --shadow-lift:    0 34px 64px -30px oklch(10% 0.05 262 / 0.6);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --dur-draw:  1600ms;

  /* Z scale */
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 200;
}