/* ============================================================================
   The Shelf — design tokens
   Shared by the marketing pages and the app. Loaded before app.css.

   Rules:
   · Nothing in this file is component-specific.
   · Never hardcode a size, radius, shadow, duration or semantic colour in a
     component. If a value is missing here, add it here.
   · --accent is the brand orange. It is safe on fills, edges, dots and the
     mark. It is NOT safe as text — use --accent-ink, which is theme-scoped.
   ============================================================================ */

:root{
  /* ---- existing public-page contract (STYLE.md §6) — unchanged ---- */
  --type-body:16px;
  --type-control:16px;
  --type-secondary:14px;
  --type-micro:13px;
  --type-h1:clamp(38px,5vw,62px);
  --type-h2:clamp(28px,3.4vw,40px);
  --type-h3:clamp(16px,1.4vw,17px);
  --type-card-title:clamp(18px,1.8vw,22px);
  --space-8:8px;
  --space-12:12px;
  --space-16:16px;
  --space-24:24px;
  --space-32:32px;
  --space-40:40px;
  --space-56:56px;
  --space-64:64px;
  --space-96:96px;
  --container-max:1200px;
  --target-min:44px;

  /* ---- families ---------------------------------------------------------
     --font-display  headings and names          (Archivo)
     --font-ui       everything else             (Hanken Grotesk)
     --font-mono     numerals, codes, serials    (Space Mono) — never body copy
     ---------------------------------------------------------------------- */
  --font-ui:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --font-display:"Archivo",system-ui,-apple-system,sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,monospace;

  /* ---- type scale -------------------------------------------------------
     One scale. No half-pixels. Sizes are breakpoint-independent; a component
     may step DOWN the scale at a breakpoint but must never change family.
     ---------------------------------------------------------------------- */
  --fs-nano:9px;     /* decorative marks only: qty pips, corner flags       */
  --fs-micro:11px;   /* uppercase eyebrows, counts, tally badges           */
  --fs-xs:12px;      /* dense meta: card location line, table meta         */
  --fs-sm:13px;      /* secondary UI: chips, tool buttons, captions        */
  --fs-base:15px;    /* default UI text, card names, table cells           */
  --fs-md:17px;      /* emphasised UI, overlay titles, form controls       */
  --fs-lg:20px;      /* modal titles, section headings                     */
  --fs-xl:25px;      /* sub-page headings                                  */
  --fs-2xl:32px;     /* page headings on small screens                     */
  --fs-display:clamp(26px,3.4vw,38px);   /* view titles                    */
  --fs-control:14px; /* THE button/control face. Every button uses this.    */

  --fw-regular:400;
  --fw-medium:500;
  --fw-semi:600;
  --fw-bold:700;
  --fw-black:800;

  --lh-tight:1.2;    /* headings, single-line names */
  --lh-snug:1.35;    /* two-line names, chips       */
  --lh-body:1.5;     /* paragraphs                  */

  --ls-tight:-.015em;
  --ls-normal:0;
  --ls-caps:.14em;   /* uppercase eyebrows only */

  /* ---- space scale (STYLE.md) — aliases so components read consistently - */
  --s-0:0;
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:40px;
  --s-8:56px;
  --s-9:64px;
  --s-10:96px;

  /* ---- shape ------------------------------------------------------------ */
  --r-xs:6px;        /* tags, tiny badges          */
  --r-sm:8px;        /* buttons, inputs, chips     */
  --r-md:12px;       /* cards, tiles, menus        */
  --r-lg:16px;       /* modals, sheets, panels     */
  --r-xl:20px;       /* large surfaces, clusters   */
  --r-pill:999px;    /* filter pills, status pills */

  /* ---- controls --------------------------------------------------------- */
  --ctl-sm:36px;     /* dense desktop-only controls; never the only hit area */
  --ctl-md:44px;     /* default — matches --target-min                       */
  --ctl-lg:52px;     /* primary actions, mobile sheet buttons                */
  --icon-sm:14px;
  --icon-md:18px;
  --icon-lg:24px;
  --icon-xl:32px;

  /* ---- motion ----------------------------------------------------------- */
  --t-fast:120ms;
  --t-base:180ms;
  --t-slow:260ms;
  --ease:cubic-bezier(.2,.6,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ---- layering --------------------------------------------------------- */
  --z-base:1;
  --z-sticky:5;
  --z-subbar:20;
  --z-topbar:30;
  --z-dock:40;
  --z-menu:60;
  --z-panel:70;
  --z-scrim:80;
  --z-modal:90;
  --z-toast:100;

  /* ---- layout ----------------------------------------------------------- */
  --app-max:1640px;             /* app content column                        */
  --dock-h:60px;                /* bottom dock; overridden per breakpoint    */
  --panel-w:440px;              /* item drawer on desktop                    */
  --safe-b:env(safe-area-inset-bottom,0px);

  /* one backdrop for every overlay that dims the app behind it */
  --scrim:rgba(16,12,6,.62);
  --scrim-blur:blur(6px);

  /* ---- brand ------------------------------------------------------------
     --accent         the brand orange. Fills, edges, dots, the mark.
     --accent-strong  accent as a FILL BEHIND WHITE TEXT (4.52:1).
     --accent-ink     accent as TEXT. Theme-scoped below — never use --accent
                      for text, it fails AA on every surface in both themes.
     ---------------------------------------------------------------------- */
  --accent:#cf5a26;
  --on-accent:#ffffff;
  --accent-strong:#c35524;
}

/* ---- semantic colour ------------------------------------------------------
   Base hues are for DOTS, BARS and EDGES (non-text, no contrast floor).
   The -ink variants are for TEXT and meet 4.5:1 on --surface and --bg.
   The app re-declares these per theme inside app.css, next to each theme's
   palette. The values below are the light-surface defaults used by the
   marketing pages, which do not set data-theme.
   -------------------------------------------------------------------------- */

/* Fallback for surfaces that render before a theme is set (public pages). */
:root{
  --accent-ink:#ae4c20;
  --ok:#2f9e63;      --ok-ink:#24784b;
  --warn:#c8880a;    --warn-ink:#8e6007;
  --danger:#d6453d;  --danger-ink:#c5322a;
  --info:#4d9ef5;    --info-ink:#0b68cb;
  --lent:#a36cdc;    --lent-ink:#8a44d3;
  --focus-outline:#ae4c20;
  --focus-ring:0 0 0 3px color-mix(in oklab,#ae4c20,transparent 55%);
}

/* ---- status vocabulary ----------------------------------------------------
   One colour per status, used identically on card, tile, row, grid cell and
   panel. Item status is the product's core signal — it must never be drawn
   two different ways on two different screens.

     home      at its home location
     nohome    no location assigned yet (unfiled — NOT the same as away)
     packed    packed into a kit, still on site
     in_use    in use on site
     on_load   out on a job
     lent      lent to a person
     missing   cannot be found

   NOTE: these are deliberately NOT defined here as var(--ok) etc. A custom
   property containing var() is substituted on the element where it is declared,
   so declaring them on :root (html) would freeze them to the light-theme inks
   before [data-theme] on <body> ever applies. app.css declares them inside each
   theme block instead; the block below is only the no-theme fallback used by
   the marketing pages.
   -------------------------------------------------------------------------- */
:root{
  --st-home:#2f9e63;    --st-home-ink:#24784b;
  --st-nohome:#c8880a;  --st-nohome-ink:#8e6007;
  --st-packed:#4d9ef5;  --st-packed-ink:#0b68cb;
  --st-in-use:#4d9ef5;  --st-in-use-ink:#0b68cb;
  --st-on-load:#a36cdc; --st-on-load-ink:#8a44d3;
  --st-lent:#a36cdc;    --st-lent-ink:#8a44d3;
  --st-missing:#d6453d; --st-missing-ink:#c5322a;
}