/* tokens.css - single source of truth for the DigiStacs work-order world.
   Layers: primitive (paper, ink) -> semantic (roles) -> scales. Nothing else defines a colour. */
:root {
  color-scheme: light;

  /* primitives: warm espresso ground, tomato, mustard and teal inks on paper */
  --paper: #fbf7f1;
  --linen: #efeae3;
  --mustard: #e4a92a;
  --teal: #63c2b4;
  --teal-deep: #0f625e;
  --tomato: #bc3820;
  --tomato-deep: #98301c;
  --tomato-bright: #e5533a;
  --tomato-light: #f26a4e;
  --espresso: #2a2220;
  --espresso-lift: #362c29;
  --ink: #221b19;
  --ink-soft: #4a3f3b;

  /* semantic roles */
  --bg: var(--mustard);
  --surface: var(--paper);
  --surface-2: var(--teal);
  --ground: var(--linen);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --text-inverse: #ffffff;
  --accent: var(--tomato);
  --accent-strong: var(--tomato-deep);
  --danger: var(--tomato);
  --success: var(--teal-deep);
  --stamp: var(--teal-deep);
  --focus: var(--espresso);
  --rule: rgba(42, 34, 32, 0.28);
  --rule-strong: rgba(42, 34, 32, 0.62);
  --ink-shadow: rgba(34, 27, 25, 0.34);
  --rule-on-dark: rgba(255, 255, 255, 0.4);
  --focus-on-dark: var(--paper);
  --perforation: rgba(34, 27, 25, 0.5);

  /* type: Big Shoulders Display for form capitals, Public Sans for reading */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-logo: "Chakra Petch", "Arial Narrow", sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-caps: 0.06em;
  --measure: 68ch;

  /* fluid type scale, 320-1440px, ratio 1.2 rising to 1.25; display capped at 6rem */
  --step-m1: clamp(0.833rem, 0.814rem + 0.095vw, 0.900rem);
  --step-0: clamp(1.000rem, 0.964rem + 0.179vw, 1.125rem);
  --step-1: clamp(1.200rem, 1.141rem + 0.295vw, 1.406rem);
  --step-2: clamp(1.440rem, 1.349rem + 0.454vw, 1.758rem);
  --step-3: clamp(1.728rem, 1.594rem + 0.670vw, 2.197rem);
  --step-4: clamp(2.074rem, 1.881rem + 0.961vw, 2.747rem);
  --step-5: clamp(2.488rem, 2.218rem + 1.350vw, 3.433rem);
  --step-6: clamp(2.986rem, 2.613rem + 1.865vw, 4.292rem);
  --step-7: clamp(3.583rem, 3.074rem + 2.545vw, 5.364rem);
  --text-small: var(--step-m1);
  --text-body: var(--step-0);
  --text-lead: var(--step-1);
  --heading-4: var(--step-2);
  --heading-3: var(--step-3);
  --heading-2: var(--step-5);
  --heading-1: var(--step-6);
  --display: var(--step-7);
  /* role sizes off the fluid ramp: fixed on purpose, because printed labels, stamps and the wordmark do not scale with the viewport */
  --text-control: 1rem; --text-tick: 0.95rem; --text-label: 1.05rem; --text-button: 1.15rem; --text-stamp: 1.35rem; --text-stamp-lg: 2rem;
  --text-nav-phone: clamp(0.72rem, 3.3vw, 0.95rem); --display-phone: clamp(2.6rem, 11.6vw, var(--display));
  --text-logo: 1.5rem; --text-logo-sm: 1.15rem; --text-logo-xs: 1.05rem;

  /* spacing, 4px base */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;
  --space-section: clamp(3rem, 8vw, 7rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 75rem;
  --header-h: 4rem;
  --nav-clear: calc(var(--header-h) + 1.5rem);

  /* shape and depth: paper is square; sheets stack with offset, blurred shadows from one light */
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --rule-w: 1.5px;
  /* printed double rule: two thin ink lines, drawn as backgrounds so the weight is exact */
  --rule-b: linear-gradient(var(--espresso), var(--espresso)) 0 100% / 100% 2px no-repeat, linear-gradient(var(--espresso), var(--espresso)) 0 calc(100% - 5px) / 100% 2px no-repeat;
  --rule-t: linear-gradient(var(--espresso), var(--espresso)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--espresso), var(--espresso)) 0 5px / 100% 2px no-repeat;
  --shadow-sheet: 0 1px 0 rgba(34, 27, 25, 0.08), 0 14px 28px -14px var(--ink-shadow);
  --shadow-lift: 0 1px 0 rgba(34, 27, 25, 0.1), 0 22px 36px -14px var(--ink-shadow);

  /* z-index scale */
  --z-base: 0; --z-raised: 10; --z-header: 50; --z-overlay: 80; --z-skip: 100;

  /* motion: durations, easings, stagger; --ease-stamp is the spring (a linear() curve with a small overshoot) */
  --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 480ms; --dur-story: 800ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-stamp: linear(0, 0.42 12%, 0.94 30%, 1.08 44%, 1.03 58%, 0.995 76%, 1);
  --stagger: 50ms;
}

/* breakpoints are content-driven and fixed at 640px, 960px and 1280px (custom properties cannot
   be used inside media queries, so the literals repeat in layout.css and components.css). */