/* ==========================================================================
   SculptScale — design tokens
   --------------------------------------------------------------------------
   Lines marked VERBATIM are copied byte-for-byte from
     Lunkad Jewellery/sketch-to-print/frontend/src/index.css  lines 1–24
   at commit 9799de2. This is a COPY, not a fork: if the two files ever
   disagree, index.css wins and this file is what changes.

   Before each deploy, run the drift check in README.md ("token drift").
   ========================================================================== */

:root {
  /* ---- VERBATIM: index.css:2-17 ------------------------------------------
     Neutrals do the work; gold appears once or twice, never as a slab. */
  --ink: #1c1b19;
  --ink-2: #3d3a36;
  --gray: #86827c;
  --gray-2: #a9a49c;
  --hairline: #e6e2da;
  --hairline-soft: #efece5;
  --surface: #ffffff;
  --bg: #f2efe9;
  --gold: #a8813f;
  --gold-soft: #f2e9d9;
  --danger: #b4432a;
  --ok: #4b7a4e;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 1px rgba(28, 27, 25, 0.04), 0 6px 20px rgba(28, 27, 25, 0.06);
  /* ---- end VERBATIM ---------------------------------------------------- */

  /* ---- site-only, and deliberately not in the app ----------------------
     The app is a logged-in tool used at a desk by a handful of studios. This
     is a public page read by strangers on phones in daylight, so it needs one
     more legible tier. Measured WCAG 2.1 contrast ratios, not estimates:

       --gold      #a8813f on --bg  =  3.11:1   fails AA body text
       --gold      #a8813f on #fff  =  3.57:1   fails AA body text
       --gold      #a8813f on --ink =  4.82:1   passes  (fine in dark bands)
       --gold-ink  #7d6229 on --bg  =  5.01:1   passes
       --gray-2    #a9a49c on --bg  =  2.16:1   fails everything
       --label     #6f6b64 on --bg  =  4.62:1   passes
       --ink-2     #3d3a36 on --bg  =  9.86:1   AAA — this is body copy

     --gold-ink is not invented: it already ships in the app as
     .chip.primary's text colour (index.css:132). --gold survives here for
     the nav underline, focus rings, and SVG strokes 3px and over. */
  --gold-ink: #7d6229;
  --label: #6f6b64;

  /* measure and rhythm */
  --maxw: 1120px;
  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 40px);
  --band-y: clamp(56px, 9vw, 112px);

  /* ---- VERBATIM: index.css:19-23 --------------------------------------
     -apple-system precedes Inter on purpose: on macOS and iOS this renders
     SF Pro, which is what the app renders, which is the point. Inter is the
     self-hosted fallback that Windows and Android land on. */
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink);

  /* The page is committed to one look. Without this, Chrome's auto-darkening
     and iOS Safari will tint a light design they were never asked to touch. */
  color-scheme: only light;
}

/* --------------------------------------------------------------------------
   Dark statement bands.

   These re-bind the SAME token names rather than hardcoding a second palette.
   That is what lets every recipe below — .card, .chip, .eyebrow, .spec,
   .btn-ghost — and every inline SVG work unchanged inside a band, with zero
   `.band-dark .thing {}` overrides. Two tokens do not invert cleanly and are
   remapped by hand: --gold-soft is a paper tint that would become a cream
   slab (which index.css:2 forbids), and --shadow is rgba-ink, invisible on
   ink, so hairlines carry the structure instead.
   -------------------------------------------------------------------------- */
.band-dark {
  --bg: #1c1b19;              /* == --ink */
  --surface: #26241f;
  --ink: #f5f1e8;             /* the favicon's plate colour */
  --ink-2: #d9d3c7;
  --gray: #a9a49c;            /* --gray and --gray-2 swap roles */
  --gray-2: #86827c;
  --hairline: #34312b;
  --hairline-soft: #2a2822;
  --gold-soft: #2e2618;
  --gold-ink: var(--gold);    /* #a8813f is 4.82:1 on ink — legible here */
  --label: var(--gray);       /* #a9a49c is 6.95:1 on ink */
  --danger: #e08a70;          /* #b4432a goes muddy on ink */
  --ok: #8fc493;              /* #4b7a4e goes muddy on ink */
  --shadow: none;

  background: var(--bg);
  color: var(--ink);
}