/* ==========================================================================
   Second Shift · design tokens
   Warm paper, forest ink and copper inspection tags. Shared by all three pages.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Surfaces (light) -------------------------------------------------- */
  --white:        #f7f7ef;
  --ghost:        #eeefe5;
  --mist:         #e2e6da;
  --rule:         #ccd2c6;
  --field:        #777f73;

  /* ---- Ink ---------------------------------------------------------------- */
  --ink:          #183b30;
  --muted:        #58675a;

  /* ---- Standby green (primary, hue 145) ----------------------------------- */
  --green-900:    #173b30;
  --green-800:    #244b3e;
  --green-700:    #193b2e;
  --green-600:    #244d3e;
  --green-300:    #c6df9b;
  --green-100:    #e4ebd9;

  /* ---- On dark ------------------------------------------------------------ */
  --on-dark:       #f4f4e9;
  --on-dark-muted: #bacbb9;
  --rule-dark:     #486456;

  /* ---- Inspection-tag orange (accent, ≤ 8% of any view) ------------------- */
  --tag:          #e9a06a;
  --tag-hot:      #de8e57;
  --tag-ink:      #854621;
  --tag-soft:     #f2e4d3;

  /* ---- Status ------------------------------------------------------------- */
  --amber:        oklch(0.78 0.15 80);         /* reserved (with ink text)     */
  --danger:       oklch(0.52 0.19 27);         /* errors · 6.1:1 on white      */

  /* ---- Type --------------------------------------------------------------- */
  --font: "Archivo", "Noto Sans", "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --wd-condensed: 86%;
  --wd-normal:   100%;   /* body                     */
  --wd-wide:     108%;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: clamp(1.25rem, 1.12rem + 0.45vw, 1.375rem);
  --fs-28: clamp(1.5rem, 1.28rem + 0.9vw, 1.75rem);
  --fs-40: clamp(1.875rem, 1.45rem + 1.8vw, 2.5rem);
  --fs-56: clamp(2.1rem, 1.15rem + 3.1vw, 3.75rem);
  --fs-display: clamp(2.4rem, 1.15rem + 5.3vw, 5.75rem);

  --lh-tight: 0.98;
  --lh-head:  1.08;
  --lh-body:  1.55;

  /* ---- Space (4px base) --------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;   --s-11: 12rem;

  --gutter: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  --margin: clamp(1.25rem, 0.4rem + 3.6vw, 4rem);
  --max:    90rem;                               /* 1440px                      */
  --section: clamp(4.5rem, 2.8rem + 6vw, 8.5rem);
  --section-tight: clamp(3.5rem, 2.4rem + 3.5vw, 5.5rem);

  /* ---- Shape -------------------------------------------------------------- */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 8px;
  --r-pill: 999px; /* status pills, chips only               */

  /* ---- Motion ------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);    /* quart */
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);    /* expo  */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-press:  120ms;
  --d-hover:  220ms;
  --d-state:  360ms;
  --d-reveal: 720ms;
  --d-hero:   900ms;

  /* ---- Layers ------------------------------------------------------------- */
  --z-raised:   1;
  --z-sticky:   100;
  --z-header:   200;
  --z-dropdown: 300;
  --z-backdrop: 400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;

  /* ---- Elevation (used sparingly: popovers, dialogs, sticky bars) --------- */
  --shadow-pop: 0 1px 2px oklch(0.21 0.022 152 / 0.08), 0 12px 32px -8px oklch(0.21 0.022 152 / 0.22);
  --header-h: 5.25rem;
}

/* Reduced motion: nothing travels, things only crossfade. Components read
   these shorter tokens and swap transforms for opacity (see main.css). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-state: 180ms;
    --d-reveal: 240ms;
    --d-hero: 240ms;
  }
}