/* ============================================================================
   PictU — design tokens
   ----------------------------------------------------------------------------
   The single source of truth for colour, type, spacing, shape, depth and
   motion. Every rule in style.css / app.css / final-layout.css must reference
   these variables rather than raw values.

   DEVIATIONS FROM THE SUGGESTED PALETTE (and why)
   ----------------------------------------------
   Contrast was measured against the stated surfaces, not assumed.

   1. Suggested secondary text #777570 on #FAF9F7 measures ~4.37:1 — below the
      WCAG AA 4.5:1 floor for body text. Darkened to #6E6C67 (~4.98:1).
   2. Signature pink #F45B98 measures ~3.09:1 against white. That clears the
      3:1 bar for non-text UI (borders, focus rings, selected outlines) but
      fails 4.5:1 for labels. So #F45B98 is kept for those non-text roles, and
      a deeper rose #CE3575 (~4.78:1) carries pink text and filled buttons.
   3. Suggested error #D64545 measures ~4.38:1 for white-on-red. Darkened to
      #C93B3B (~5.03:1) so error labels and destructive buttons both pass.

   No web font is loaded on purpose: a photobooth is often used on a venue
   network or offline, and a third-party font request would add latency, a
   layout shift, and an outbound call from a privacy-sensitive app. The system
   sans stack below has no download and no shift.
   ========================================================================== */

:root {
  /* --- Colour: surfaces ------------------------------------------------- */
  --bg: #faf9f7;          /* warm paper — the page */
  --surface: #ffffff;     /* inputs, menus, admin cards */
  --surface-sunken: #f4f2ef; /* wells, empty slots, thumbnail beds */
  --stage: #17171a;       /* camera stage, toasts, primary dark buttons */

  /* --- Colour: text ----------------------------------------------------- */
  --ink: #20201f;         /* primary text — ~15.7:1 on --bg */
  --ink-2: #6e6c67;       /* secondary text — ~4.98:1 on --bg (AA) */
  --ink-3: #8a8781;       /* large/decorative only — ~3.4:1 on --bg */
  --ink-invert: #ffffff;  /* text on --stage or filled buttons */

  /* --- Colour: lines ---------------------------------------------------- */
  --line: #eae7e3;        /* the default separator — one hairline, no shadow */
  --line-strong: #d9d4cd; /* input borders, pressed edges */

  /* --- Colour: accent --------------------------------------------------- */
  --accent: #f45b98;        /* signature pink: rings, outlines, marks (non-text) */
  --accent-strong: #ce3575; /* pink that carries text or a white label (AA) */
  --accent-hover: #b92e67;  /* filled-button hover (AA) */
  --accent-soft: #fff0f6;   /* selected tint, quiet highlight */
  --accent-line: #f8c6da;   /* accent hairline */

  /* --- Colour: semantic ------------------------------------------------- */
  --ok: #21845a;
  --ok-soft: #eaf5ef;
  --err: #c93b3b;
  --err-soft: #fbeeee;
  --warn: #9a6412;          /* reserved; hide-state accent */

  /* --- Type ------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem); /* 28 → 38px */
  --fs-h2: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);   /* 18 → 21px */
  --fs-h3: 0.9375rem;   /* 15px */
  --fs-body: 1rem;      /* 16px — prose */
  --fs-ui: 0.9375rem;   /* 15px — controls */
  --fs-sm: 0.8125rem;   /* 13px — helper text */
  --fs-xs: 0.75rem;     /* 12px — short labels only */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.55;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Uppercase + tracking is reserved for short labels, never prose. */
  --track-label: 0.04em;
  /* Display tracking floor: never tighter than -0.03em. */
  --track-display: -0.02em;

  /* --- Space (4px base) ------------------------------------------------- */
  --s-1: 0.25rem;  /*  4px */
  --s-2: 0.5rem;   /*  8px */
  --s-3: 0.75rem;  /* 12px */
  --s-4: 1rem;     /* 16px */
  --s-5: 1.5rem;   /* 24px */
  --s-6: 2rem;     /* 32px */
  --s-7: 3rem;     /* 48px */
  --s-8: 4rem;     /* 64px */

  /* --- Shape ------------------------------------------------------------ */
  --r-sm: 6px;    /* thumbnails, chips inside dense UI */
  --r-md: 10px;   /* inputs, buttons, small panels */
  --r-lg: 14px;   /* panels, menus */
  --r-xl: 20px;   /* the camera stage only */
  --r-pill: 999px;/* chips and the primary action — nowhere else */

  /* --- Depth ------------------------------------------------------------
     Depth is declared ONCE: a hairline border. Shadows are reserved for
     elements that genuinely float above the page (menus, toasts), so we never
     double-draw an edge with both a border and a wide shadow.               */
  --sh-menu: 0 12px 32px rgba(32, 32, 31, 0.12), 0 2px 6px rgba(32, 32, 31, 0.06);
  --sh-toast: 0 8px 24px rgba(32, 32, 31, 0.24);
  --sh-focus: 0 0 0 3px var(--accent-soft);

  /* --- Layout ----------------------------------------------------------- */
  --page-max: 1000px;    /* comfortable measure for the workspace */

  /* Camera page measure: wider to use available screen for stage + preview.
     Removed the old stage-width-based cap — the page now uses full width
     minus padding, and the stage-col grid sizes itself: stage width from
     viewport height, comp-area capped at 280px or 25vw. */
  --page-max-cam: none;
  --header-h: 3.75rem;   /* 60px — must not dominate */
  --tap: 2.75rem;        /* 44px — minimum touch target */

  /* --- Motion -----------------------------------------------------------
     One grammar: 140ms for control feedback, 180ms for overlays. Ease-out
     for entrances, ease-in-out for state changes. No bounce, no elastic,
     no infinite motion on static content.                                   */
  --t-fast: 140ms;
  --t-med: 180ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion is handled globally at the bottom of style.css; tokens that
   animate reference the durations above so they are neutralised in one place. */