/* ─────────────────────────────────────────────────────────────────────────────
   tokens.css — the design system, shared by the configurator and the try-on

   Both pages are one product, so every colour, size and duration comes from
   here. A value that appears in only one page still belongs in this file if a
   second page could ever want it.

   THE PALETTE IS LIGHT AND ALMOST COLOURLESS
   ──────────────────────────────────────────
   Jewellery is the only saturated thing on screen. Gold, platinum and a blue or
   pink stone are what the eye should find first, so the interface around them is
   warm greys and near-black text with a single restrained gold accent for
   selection. The previous near-black-and-cyan theme was a development console:
   it competed with the ring and read as a debug tool.

   ONE EXCEPTION, AND IT IS DELIBERATE
   ───────────────────────────────────
   The video panel in the try-on stays black. Letterbox bars around a camera feed
   must read as dead space belonging to the camera, not as page background.
───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Colour ──────────────────────────────────────────────────────────────
     --bg is duplicated in JS as VIEWER.background (js/config.js) so the WebGL
     canvas blends into the page. Change one, change the other. */
  --bg:          #f4f2ee;   /* warm off-white: the page and the 3D stage */
  --surface:     #ffffff;   /* raised surfaces: rails, drawers, cards */
  --surface-alt: #faf9f6;   /* a hair off --surface, for nested blocks */

  --ink:      #171614;   /* primary text, and the fill of a primary button */
  --ink-soft: #55524c;   /* body copy and secondary text */
  --muted:    #8d887e;   /* labels, hints, inactive controls */

  --line:     #e3dfd6;   /* borders and dividers */
  --line-soft:#efece5;   /* the faintest rule */

  --accent:      #a8874b;   /* gold: selection, focus, the active option */
  --accent-soft: #f0e7d5;   /* the same gold at wash strength, for fills */

  /* The try-on's camera panel. Not --bg on purpose — see the header. */
  --video-bg: #000000;

  /* ── Typography ──────────────────────────────────────────────────────────
     Two families, loaded from Google Fonts on each page:
       display — Cormorant Garamond, for headings (a jeweller's serif)
       body    — Inter, for everything else (clear at small sizes) */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale. rem so it respects the reader's browser setting. */
  --text-xs:  0.68rem;   /* option titles, hints, the smallest labels */
  --text-sm:  0.78rem;   /* controls, stats, buttons */
  --text-md:  0.88rem;   /* body copy */
  --text-lg:  1.05rem;   /* the logo */
  --text-xl:  1.75rem;   /* page heading */

  --tracking-wide:  0.08em;   /* letter-spacing for uppercase labels */
  --tracking-wider: 0.16em;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  /* The configurator's options column. 360, not 320: the option tiles are
     circles in rows of three, and the widest row — three stone colours at the
     larger disc size — needs 3×92 plus gaps to sit on one line. A colour that
     wraps to a line of its own reads as an odd one out rather than a third
     choice. */
  --rail-width:    360px;

  /* Option tile discs. Photographs of parts are the smaller of the two; metal
     and stone are larger because a colour has to be judged, not identified,
     and a bigger area of it is easier to judge. */
  --disc-image:   72px;
  --disc-swatch:  86px;
  --drawer-width:  300px;   /* the try-on's settings drawer */
  --header-height:  56px;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ── Elevation ───────────────────────────────────────────────────────────
     Two levels only. On a light background a heavy shadow reads as grubby, so
     these are wide and very faint. */
  --shadow-sm: 0 1px 2px rgba(23, 22, 20, 0.05);
  --shadow-lg: 0 12px 40px rgba(23, 22, 20, 0.10);

  /* ── Motion ──────────────────────────────────────────────────────────────
     One place for durations so transitions feel consistent across components. */
  --transition-fast: 0.15s;
  --transition-base: 0.25s;
  --transition-slow: 0.4s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Stacking order ──────────────────────────────────────────────────────
     Declared together so the layering is legible in one glance rather than
     scattered as bare numbers. The try-on's panel stacks video (auto) < 2D
     overlay < AR canvas; the drawer and its scrim sit above everything. */
  --z-overlay-canvas:  2;
  --z-ar-canvas:       3;
  --z-panel-ui:        5;
  --z-header:         10;
  --z-loading:        20;
  --z-scrim:          30;
  --z-drawer:         31;
}