/* DESIGN TOKENS: the one file that names Stamp It!'s colours, type, spacing,
   radius and motion. Every other sheet reads these as var(--...).

   The values are Clicker Wonderland's (clicker-wonderland/src/tokens.css),
   recoloured Chop Red as docs/LOOK.md sets out. Layout, type, spacing, radii
   and motion are Clicker's unchanged; only colours moved. Light only.

   TEXT AND FILL ARE KEPT APART, as in Clicker: --accent-color and
   --accent-hover are fills, borders and shadows and are never a `color:`.
   Text that has to be read uses --text-primary, --text-secondary,
   --accent-text, --ok-text, --warn-text or --fail-text. Every one of those
   was measured against every surface below (the app lane's report has the
   table); the lowest is --text-secondary on the selected-chip tint #fbe9e6 at
   5.4:1, and on --bg-1 it is 5.9:1. */

:root {
    color-scheme: light;

    /* Surfaces */
    --bg-1: #fdf5f3;
    --sidebar-bg: #fefaf8;
    --card-bg: #fffdfc;
    --stage-bg: #ffffff;

    /* Edges */
    --border-color: rgba(232, 80, 63, 0.22);
    --border-soft: rgba(184, 50, 94, 0.14);
    --border-card: #ddd3d1;
    --border-card-open: #cbbfbd;
    /* A control a customer operates (switch track, slider track edge) is held
       to 3:1 against what it sits on (WCAG 1.4.11). */
    --border-control: #8a7c7a;

    /* Text */
    --text-primary: #5b4046;
    --text-secondary: #75585d;
    --accent-text: #a8302a;      /* the readable red */
    --ok-text: #1c6b4a;
    --warn-text: #8a4b00;
    --fail-text: #a3243c;

    /* Fills only, never text */
    --accent-color: #e8503f;
    --accent-hover: #d63f2f;
    --accent-2: #c79bd6;
    --accent-3: #74dcb4;
    --icon-accent: #b8325e;
    --icon-shadow: rgba(184, 50, 94, 0.26);

    --focus-ring: #a8302a;
    --shadow-pink: rgba(232, 80, 63, 0.26);
    --shadow-soft: rgba(170, 90, 110, 0.16);
    --scrim-color: rgba(70, 40, 45, 0.42);

    /* The house action gradient (LOOK.md "Buttons"). Every stop carries white
       text at 5.29:1 or better. */
    --grad-primary: linear-gradient(135deg, #c4392b, #a83266);
    --grad-primary-hover: linear-gradient(115deg, #c4392b, #b8325e 55%, #8a46a8);
    /* The wordmark. Each stop is at least 5.29:1 on the white stage, above
       the 3:1 floor for large text. */
    --grad-wordmark: linear-gradient(115deg, #c4392b 0%, #b8325e 55%, #8a46a8 100%);

    /* The 3D stage: ink and plate colours for the viewer. Read by
       src/viewer.js through getComputedStyle, so the stage has one source. */
    --stage-ink: #c4392b;
    --stage-plate: #f2dcd6;
    --stage-cover: #f7efe9;

    --sidebar-width: clamp(444px, 33.5vw, 540px);

    /* Spacing (Clicker's five purpose-named steps) */
    --space-hug: 0.2rem;
    --space-chip: 0.28rem;
    --space-field: 0.45rem;
    --space-card: 0.62rem;
    --space-air: 0.85rem;

    /* Type: the Babah3D family ladder */
    --font-ui: 'Overpass', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Inter', 'Segoe UI Variable Display', 'Segoe UI', system-ui,
                    -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: Bitter, Georgia, serif;

    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.0625rem;
    --fs-mark: 1.25rem;

    --fw-normal: 400;
    --fw-strong: 640;
    --fw-display: 800;

    --lh-tight: 1.35;
    --lh-base: 1.55;

    --tracking-tight: -0.03em;
    --tracking-title: -0.01em;
    --tracking-caps: 0.06em;

    /* Radii */
    --radius-inset: 8px;
    --radius-control: 10px;
    --radius-card: 14px;
    --radius-dialog: 18px;
    --radius-chip: 999px;

    --c-white: #ffffff;

    /* Motion */
    --dur-150: 150ms;
    --dur-180: 180ms;
    --dur-200: 200ms;
    --dur-250: 250ms;
    --ease-settle: cubic-bezier(.2,.7,.3,1);
    --ease-standard: cubic-bezier(.22,.61,.36,1);
}