/* Hallmark · tokens · Maruti Collection
 * theme: custom (tuned) · vibe: "indigo ground, brass thread, cloth first"
 * axes: dark / roman-serif / chromatic-brass
 *
 * The single source of truth for every colour, face, step and easing on this
 * site. design.css and style.css reference these by name and never inline a
 * raw value. Contrast was computed, not eyeballed — figures in design.md.
 *
 * WHY DARK (third direction on this project, and the reason for it)
 * The first two passes were light — warm sand paper, restrained editorial. Both
 * were rejected for reading too plain: "very simple with white white website".
 * A dark ground is the single biggest lever available, and it is not a gimmick
 * here: hand-block prints are high-contrast motifs on dyed cotton, and on a
 * dark field they glow instead of politely sitting there.
 *
 * WHY INDIGO AND BRASS
 * Indigo is the dye of Indian hand-block printing, so the ground IS the
 * material. Brass is the gold zari thread traditionally worked onto indigo
 * cloth — the pairing comes off the product, not off a palette generator. It
 * also has nothing in common with the cream-and-terracotta scheme that got
 * rejected, which is the most over-produced palette in AI-generated design.
 *
 * The token NAMES are unchanged from the light system on purpose: design.css
 * and style.css reference ~400 of them, so the whole site inverts by swapping
 * values here rather than by rewriting every call site.
 * ========================================================================= */

:root {
  /* ---- Ground — deep indigo-black. Never pure #000. ------------------
     Named "paper" for continuity with the existing call sites; it is now the
     dark field the cloth sits on. */
  --color-paper:      oklch(14.0% 0.022 264);  /* #050912 */
  --color-paper-2:    oklch(18.0% 0.024 264);  /* #0C111C — panels, image beds */
  --color-paper-3:    oklch(23.0% 0.026 264);  /* #171D29 — raised panels */

  /* ---- Hairlines. On a dark field a rule reads by being LIGHTER. ------
     rule-2 is the subtle one, rule the assertive one — same relationship the
     light system had, so the bridge in design.css keeps its meaning. */
  --color-rule-2:     oklch(25.0% 0.022 264);  /* #1C222C */
  --color-rule:       oklch(32.0% 0.024 264);  /* #2D333F */

  /* ---- Text — warm off-white, tinted 70 deg so it never reads clinical */
  --color-ink:        oklch(94.0% 0.012 70);   /* #F1EAE3  16.68:1 on ground */
  --color-ink-2:      oklch(78.0% 0.012 70);   /* #BCB6AF   9.94:1 */
  --color-muted:      oklch(62.0% 0.012 70);   /* #8B857F   5.46:1 */

  /* ---- The one accent — brass ---------------------------------------- */
  --color-accent:     oklch(75.0% 0.125 78);   /* #D9A347   8.82:1 */
  --color-accent-2:   oklch(85.0% 0.105 80);   /* #F2C67C  12.50:1 — hover */
  --color-accent-ink: oklch(14.0% 0.022 264);  /* ground, for text on brass */
  --color-accent-tint:oklch(23.0% 0.030 264);  /* quiet indigo panel */

  /* Edge for colour chips and image beds. Light on a dark field. */
  --color-edge:       oklch(94.0% 0.012 70 / 0.16);
  --color-focus:      oklch(80.0% 0.150 78);   /* #F2B036  10.48:1 */

  /* ---- Type ----------------------------------------------------------
     Fraunces: variable serif with SOFT and WONK axes. The wonk gives the
     display a slight hand-cut irregularity — the same virtue the product has,
     since a block placed by eye never lands perfectly square. Roman only;
     italic headers are banned.

     Switzer: Indian Type Foundry (Fontshare). A neutral grotesk from an Indian
     foundry for an Indian textile label — provenance Jost, a Futura clone,
     could not carry. */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Switzer", ui-sans-serif, system-ui, sans-serif;

  /* Body 400 against display 700 is a 300-unit gap — the minimum that reads as
     a decision rather than a default. */
  --weight-body:    400;
  --weight-display: 700;

  /* ---- Scale — major third (1.25) from a 16px body ------------------
     Display ceiling is raised from 5.25rem to 6rem: this direction wants the
     wordmark to carry a fold, and the headline is two short words. */
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-4xl:  3.8147rem;
  --text-display:   clamp(3rem, 7vw + 1rem, 6rem);
  --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.8147rem);

  /* ---- Space — 4pt scale ------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Gutter between tiles in the full-bleed wall. Deliberately tiny — the
     density IS the design; wide gutters are what made the last pass read
     "simple". */
  --wall-gap: 2px;

  /* ---- Motion ------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ---- Line and radius --------------------------------------------
     A small radius, set at the client's request ("give the corner"). Kept to
     6px: enough to soften every frame and read as a catalogue card, small
     enough that a wall of them still reads as one surface rather than as
     bubbles. */
  --rule-hair:    1px;
  --radius-card:  6px;
  --radius-input: 2px;
  --radius-pill:  999px;

  /* ---- Measure ----------------------------------------------------- */
  --measure: 62ch;

  /* ---- Elevation ---------------------------------------------------
     This system is flat: frames sit ON the ground, separated by a 2px gutter,
     never floating above it. So there is exactly one shadow, for the one
     element that genuinely leaves the page plane — the WhatsApp button fixed
     over scrolling photographs, which needs a lift or it disappears into a
     dark frame.

     --z-float sits above Blocksy's sticky header (50) and well below its
     off-canvas menu panel (999999), so an open mobile menu covers the button
     rather than having it punch through. */
  --shadow-float: 0 0.25rem 1.25rem oklch(0% 0 0 / 0.55);
  --z-float: 100;

  /* ---- WhatsApp brand ----------------------------------------------
     The one place the palette gives way to somebody else's colour, at the
     client's request and against a live reference. The floating chat button is
     a universal affordance, not a piece of this design — people look for that
     green circle, and a brass one made them look twice.

     Converted from the reference hexes rather than eyeballed:
       #25D366 -> oklch(76.1% 0.201 149.7)
       #20BA5A -> oklch(69.3% 0.182 149.9)

     The white glyph is WhatsApp's own mark and scores 1.98:1 on the green,
     which is below the 3:1 floor for a meaningful graphic. Kept because it is
     the recognised brand lockup and the client asked for it; --color-wa-ink-alt
     is here at 6.21:1 for a one-line swap if that trade stops being worth it. */
  --color-wa:          oklch(76.1% 0.201 149.7);
  --color-wa-hover:    oklch(69.3% 0.182 149.9);
  --color-wa-ink:      oklch(100% 0 0);
  --color-wa-ink-alt:  oklch(28.0% 0.060 156);
}