/* Tredoli · design tokens
 * Custom Hallmark theme — "industrial precision, safety-amber, engineered calm"
 * Every colour and font in style.css references these names. Edit here, not there. */

:root {
  /* ---- colour · warm-concrete paper, graphite bands, one safety-amber signal ---- */
  --color-paper:         oklch(97.5% 0.007 85);
  --color-paper-2:       oklch(94.5% 0.010 85);
  --color-ink:           oklch(21% 0.012 75);
  --color-ink-2:         oklch(33% 0.012 75);
  --color-muted:         oklch(46% 0.012 75);
  --color-rule:          oklch(87% 0.010 85);
  --color-rule-2:        oklch(91% 0.008 85);

  /* dark surfaces (hero panel + process band) */
  --color-graphite:      oklch(19% 0.012 75);
  --color-graphite-2:    oklch(23.5% 0.014 75);
  --color-graphite-rule: oklch(33% 0.014 75);
  --color-ink-dark:      oklch(94% 0.010 85);
  --color-muted-dark:    oklch(69% 0.012 85);

  /* the one signal */
  --color-accent:        oklch(82% 0.165 85);   /* safety amber — dark surfaces, chips, belt edge */
  --color-accent-deep:   oklch(56% 0.145 60);   /* amber-orange — marks on light surfaces */
  --color-accent-ink:    oklch(21% 0.012 75);   /* text on amber fills */
  --color-focus:         oklch(55% 0.17 60);

  /* shade / overlay */
  --shadow-whisper: 0 1px 2px oklch(21% 0.012 75 / 0.08);
  --color-scrim:    oklch(10% 0.01 75 / 0.86);
  --color-shade:    oklch(10% 0.01 75 / 0.35);

  /* illustration */
  --color-cardboard:     oklch(74% 0.055 80);
  --color-cardboard-2:   oklch(64% 0.060 75);
  --color-steel:         oklch(60% 0.014 80);

  /* ---- type ---- */
  --font-display: "Space Grotesk", "Avenir Next", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --text-sm:      0.8rem;
  --text-base:    1rem;
  --text-md:      1.25rem;
  --text-2xl:     2.4414rem;
  --text-display: clamp(2.9rem, 6.2vw + 0.8rem, 5.5rem);

  /* ---- space · 4pt scale ---- */
  --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;

  /* ---- 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;

  /* ---- structure ---- */
  --page-max:    72rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --radius-ctl:  6px;
  --radius-card: 10px;
  --rule-hair:   1px;

  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-modal: 400;
}