/* Craftery — design tokens
 *
 * Direction: warm charcoal and cream, with one accent. The products supply
 * every other colour on the site.
 *
 * That is the governing idea, not a style preference. The things being sold
 * are printed in peak green, red, pink, yellow, two blues and purple —
 * strongly coloured objects, photographed against whatever the page provides.
 * A site with its own strong hue competes with them: the previous build put
 * green products on green cards inside a green page, and the objects
 * disappeared into their own shopfront. So the shell here is close to neutral
 * and deliberately warm, and the only saturated thing on any screen is either
 * the product or the one action you are meant to take.
 *
 * Every value below is measured. No stylesheet may introduce a raw colour,
 * size, space, radius, shadow or duration; if a rule needs something that is
 * not here, it is added here first and referenced by name.
 */

:root {
  /* ---- Ink ---------------------------------------------------------------
     Warm near-black rather than grey: #1A1715 carries a little red, so it
     sits with the cream instead of on top of it. Three weights, all of which
     clear AA on all three surfaces. */

  --ink: #1A1715;      /* 16.69:1 on paper · 17.84 on card · 15.19 on sunken */
  --ink-2: #4A423C;    /*  9.20:1 · 9.83 · 8.37 — labels, secondary copy */
  --ink-3: #6E645C;    /*  5.40:1 · 5.77 · 4.91 — hints, captions, meta */

  /* ---- Paper -------------------------------------------------------------
     Cream, not white. A pure-white page under warm objects reads clinical,
     and every one of these products is meant to feel like a present. */

  --paper: #FAF7F2;    /* the page */
  --paper-2: #F2ECE3;  /* sunken — the stage an object sits in */
  --paper-3: #FFFFFF;  /* raised — cards, inputs, the header */

  --line: rgba(26, 23, 21, 0.10);        /* hairline */
  --line-strong: rgba(26, 23, 21, 0.22); /* a boundary that identifies a control */

  /* ---- Accent ------------------------------------------------------------
     One warm red. It appears on the single action a screen wants you to take
     and almost nowhere else — if it is on more than ~5% of a viewport, it has
     stopped meaning "press this".

     #C4432B is the brightest red that still carries a white label (5.02:1)
     *and* works as text on cream (4.70:1). Anything brighter — #D14E31 was the
     next candidate — drops both under the floor. */

  --accent: #C4432B;
  --accent-deep: #A8341F;   /* hover · white on it 6.61:1 */
  --accent-ink: #FFFFFF;    /* 5.02:1 on accent */

  /* Accent as *text* on cream is 4.70:1 — fine. Accent on ink is 3.55:1, so
     it is large-text-only on a dark block. Do not set small accent copy on
     `--ink` without re-measuring. */

  /* ---- States ------------------------------------------------------------
     The accent is already a red, so the error colour has to be unmistakably
     a different red rather than a near neighbour: #8E1F1F is darker and
     cooler, and the two measure 1.77:1 against each other, which is a visible
     step in lightness rather than a hue a reader has to name. Errors also
     always carry text and sit on their own tinted surface — colour is never
     the only signal. */

  --danger: #8E1F1F;        /* 8.31:1 on paper · 8.88 on card */
  --danger-soft: #FDF4F2;   /* danger on it: 8.20:1 */

  --focus-ring: #1A1715;    /* ink, not the accent: it has to read on the
                               accent itself, and 5.02:1 against it does */

  /* ---- Type --------------------------------------------------------------
     Fraunces for display, Instrument Sans for everything else.

     Fraunces is warm, high-contrast and a little characterful — the register
     a gift wants. It was already licensed into this repo for the 3D text
     engine, and the 9.2 KB display subset is the same face the printed
     letterforms use, which is a quiet piece of coherence: the headline and
     the product are set in one typeface.

     Instrument Sans is the counterweight — modern, slightly narrow, neutral
     without being anonymous. Both are self-hosted; neither costs a
     third-party request. 47 KB for the pair.

     The fallbacks must sit immediately after the real face and BEFORE any
     generic family: a generic always resolves, so anything after it is
     unreachable. */

  --font-display: 'Fraunces Display', 'Fraunces Fallback', ui-serif, Georgia, serif;
  --font-body: 'Instrument Sans', 'Instrument Fallback', ui-sans-serif, system-ui, sans-serif;

  /* Major third from 16px, with a display step that can carry a short
     sentence at hero size. Five sizes maximum on any one page. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-display: clamp(2.75rem, 5.2vw + 0.75rem, 4.75rem);

  --measure: 62ch;

  /* ---- Space -------------------------------------------------------------
     4pt base, nine steps, named by role. */
  --space-3xs: 0.125rem;
  --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;
  --space-4xl: 9rem;

  /* ---- Radii -------------------------------------------------------------
     Softer than a utility app and firmer than a toy. Chosen by the size of
     the thing, so a control and the panel containing it never carry the same
     curve — which is what makes a layout read as flat. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Elevation ---------------------------------------------------------
     Tinted with the ink hue rather than pure black: a grey shadow under a
     warm object is the thing that makes a cream page look dirty. One per
     element, never stacked. */
  --shadow-sm: 0 1px 2px rgba(26, 23, 21, 0.05);
  --shadow-md: 0 6px 16px -6px rgba(26, 23, 21, 0.14);
  --shadow-lg: 0 18px 40px -18px rgba(26, 23, 21, 0.26);

  /* ---- Motion ------------------------------------------------------------
     Calm. Things arrive and settle; nothing bounces, because an overshoot on
     a gift site reads as a toy. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --stagger-step: 70ms;

  /* ---- Z -----------------------------------------------------------------
     Six named levels. Nothing may freestyle a z-index. */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}