/* Acervo tokens: the one place colour, type, shape, elevation and motion are decided.
   The site and the system page both read from here. A value that is not a token does not go in a component:
   if a new flow needs one, it is added here first, with its role. See system.html. */
:root {
  /* ---------- Colour. The photos carry the colour; the chrome stays neutral. ---------- */
  --bg: #ffffff;
  --ink: #111111;
  --muted: #62625e;
  --faint: #a3a39d;
  --line: rgba(17, 17, 17, 0.08);
  --surface: #f4f4f2;
  --surface-2: #ebebe8;
  --brand: #f7721f;   /* the mark only, never an interface colour */
  --ai-bg: #f2eee6;   /* marks data read by AI, waiting for the studio to confirm */
  --ai-ink: #75664a;
  --glass: rgba(30, 28, 28, 0.78);
  --glass-ink: #f6f5f3;
  --glass-muted: rgba(246, 245, 243, 0.5);
  --glass-line: rgba(255, 255, 255, 0.1);
  --glass-hover: rgba(255, 255, 255, 0.08);
  --shot: #f3f3f3;    /* the studio white behind catalogue product shots */

  /* ---------- Type. One family; one size per role. ---------- */
  --font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Inter, "Helvetica Neue", Arial, sans-serif;
  --fs-micro: 10.5px; /* badges, superscript counts */
  --fs-xs: 11px;      /* overlines, captions on photos */
  --fs-sm: 12px;      /* fine print, chips on photos */
  --fs-md: 13px;      /* secondary text, chips, tags */
  --fs-base: 14px;    /* body and controls */
  --fs-lg: 15px;      /* the search field, filter words */
  --fs-input: 16px;   /* fields on phones: below 16px iOS zooms in */
  --fs-xl: 17px;      /* panel and sheet titles */
  --fs-2xl: 22px;     /* modal titles */
  --fs-title: clamp(30px, 3vw, 44px);   /* a project's name */
  --fs-lede: clamp(16px, 1.6vw, 19px);  /* the line under a display title */
  --fs-display: clamp(40px, 6vw, 76px); /* the one big line on a page */

  /* ---------- Shape. Photos are square-cornered; everything you press is round. ---------- */
  --r-img: 0px;
  --r-thumb: 8px;    /* small thumbnails in lists */
  --r-option: 10px;  /* a row you pick in a menu */
  --r-tile: 12px;    /* thumbnails in cards */
  --r-card: 14px;
  --r-pop: 16px;     /* the furniture pop-up */
  --r-panel: 18px;
  --r-sheet: 20px;   /* the filters modal; a sheet's top corners on phones */
  --r-float: 24px;   /* panels that float over the page: search, suggestions */
  --r-pill: 999px;

  /* ---------- Layout ---------- */
  --gutter: 20px;
  --head: 68px;
  --lbw: clamp(300px, 27vw, 420px); /* info column in the feed viewer */

  /* ---------- Layers. Named, so a new overlay finds its place instead of guessing a number.
     Inside a component, small local values (1 to 4) stack its own parts. ---------- */
  --z-header: 20;
  --z-safe-area: 25;         /* the band behind the phone's status bar */
  --z-page: 40;              /* a project's page, the feed viewer */
  --z-header-over-page: 41;  /* the header stays above a page */
  --z-scrim: 44;             /* the veil behind the search panel */
  --z-bar: 45;               /* the floating bar */
  --z-panel: 47;             /* the bar's panel when it opens from the header */
  --z-header-searching: 48;  /* the header lifts over the veil while searching */
  --z-toast: 50;
  --z-viewer: 55;            /* a piece flown out of its tile */
  --z-sheet-veil: 58;
  --z-sheet: 59;             /* the filters modal */
  --z-top: 60;               /* menus, the full-screen drawing */

  /* ---------- Space. The scale new work uses; a step is 2px below 16, then 4 and 8. ---------- */
  --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-10: 10px; --s-12: 12px; --s-14: 14px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-28: 28px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-56: 56px; --s-64: 64px; --s-96: 96px;

  /* ---------- Elevation. Hairlines instead of borders; three heights above the page, and the glass bar. ---------- */
  --ring: 0 0 0 1px rgba(17, 17, 17, .07);                                                 /* a resting outline */
  --shadow-float: 0 0 0 1px rgba(17, 17, 17, .07), 0 6px 22px rgba(17, 17, 17, .08);       /* bars resting on content */
  --shadow-raised: 0 0 0 1px rgba(17, 17, 17, .06), 0 18px 44px -14px rgba(17, 17, 17, .18); /* panels and menus */
  --shadow-overlay: 0 24px 70px rgba(17, 17, 17, .18);                                     /* modals and drawers */
  --shadow-glass: 0 0 0 1px var(--glass-line) inset, 0 18px 50px rgba(0, 0, 0, .25);
  --shadow-raised-focus: 0 0 0 1px rgba(17, 17, 17, .16), 0 18px 44px -14px rgba(17, 17, 17, .2); /* a raised field in use */
  --shadow-field-focus: 0 0 0 1px rgba(17, 17, 17, .14), 0 2px 8px rgba(0, 0, 0, .03);         /* the header field in use */
  /* Small lifts: not heights, just enough to separate a part from what it sits on. */
  --shadow-selected: 0 1px 2px rgba(0, 0, 0, .08);         /* the chosen segment */
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, .2);              /* a switch's knob */
  --shadow-on-photo: 0 1px 3px rgba(17, 17, 17, .18);      /* a control sitting on a photo */
  --shadow-mark: 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 4px rgba(0, 0, 0, .28);          /* a dot marking a piece */
  --shadow-mark-open: 0 0 0 5px rgba(255, 255, 255, .38), 0 1px 4px rgba(0, 0, 0, .28); /* the dot whose pop-up is open */
  --shadow-label: 0 1px 6px rgba(0, 0, 0, .18);            /* a label over a photo */

  /* ---------- Motion. Four durations, three curves, one stagger. Everything starts where it was touched. ---------- */
  --dur-instant: 100ms; /* presses */
  --dur-quick: 180ms;   /* hover, colour, small fades */
  --dur-base: 300ms;    /* panels, fades, crossfades */
  --dur-slow: 500ms;    /* pages, heights, sheets */
  --dur-ambient: 1100ms; /* slow drifts: a photo breathing closer, a ring */
  --stagger: 50ms;      /* between items arriving one after another */
  --ease: cubic-bezier(.2, .7, .2, 1);      /* the default: quick start, long soft landing */
  --ease-in: cubic-bezier(.4, 0, 1, 1);     /* leaving: things that close get out of the way */
  --spring: cubic-bezier(.34, 1.4, .64, 1); /* a small overshoot, for presses and dots */
  /* The viewer's travel uses a physical spring (mass, stiffness, damping), computed in script: see "physical" on the system page. */

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 0ms; --dur-quick: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-ambient: 0ms; --stagger: 0ms; }
}