/* Clear Cosmetic Tattoo Removal Studio — design tokens
 * Source of truth: Figma "Clear — Brand Engine" (wpcpXlxi21ogYXP3cCWMuJ),
 * variable collection "Brand Tokens". Change there AND here together.
 * Locked 2026-10-13. Sibling brand to Dallas Brows (../tokens.css) — deliberately
 * COOL where that one is warm, so the two are never confusable at one address.
 */

:root {
  /* ---- colour ---- */
  --color-bg:        #f7f9f9; /* page canvas — cool near-white */
  --color-surface:   #eaeef0; /* cards, tints, photo slots */
  --color-line:      #d8dee1; /* hairlines, dividers, input borders */
  --color-ink:       #1f262b; /* primary text + CTA fill — charcoal, blue bias */
  --color-ink-soft:  #5b666d; /* secondary text */
  --color-accent:    #46697b; /* links, labels, emphasis — dusty blue */
  --color-accent-2:  #a9bec8; /* tints, chips, text on ink grounds */
  --color-on-ink:    #f7f9f9; /* text/icons on ink */

  /* Dark-ground support. Dark is the STAGE (hero bands, statement posts, deck
     dividers), never the page. If dark ever becomes the primary ground, deepen
     --color-ink toward #14181b first — see BRAND.md §3. */
  --color-line-on-ink: #3a444a;

  /* Status (not brand colours — use only for form/system feedback) */
  --color-danger:    #b4504a;

  /* ---- type ---- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Instrument Serif ships Regular + Italic ONLY — there is no bold.
     Emphasis comes from the italic or from scale, never from weight. */
  --weight-display: 400;
  --weight-body:    400;
  --weight-medium:  500;
  --weight-strong:  600;

  /* Scale (px) — matches the Figma text styles 1:1 */
  --size-hero:  64px;  --tracking-hero: -0.02em; --leading-hero: 1.00;
  --size-h1:    40px;  --tracking-h1:   -0.01em; --leading-h1:   1.10;
  --size-h2:    26px;  --tracking-h2:    0;      --leading-h2:   1.20;
  --size-body:  15px;  --leading-body: 1.55;
  --size-small: 12.5px; --leading-small: 1.50;
  --size-meta:  10.5px; --tracking-meta: 0.12em;

  /* ---- shape + space ---- */
  --radius-card: 14px;
  --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 72px; --space-8: 112px;

  /* ---- motif ---- */
  /* The fade: a field of marks thinning to nothing. One instance per surface.
     Never behind body text, never behind a client photo, never animated. */
  --motif-dot-max:   8px;
  --motif-dot-step: 26px;
  --motif-falloff: 0.78; /* size multiplier across the field */
  --motif-fade:    0.85; /* opacity multiplier across the field */

  /* The wordmark's five letter opacities — C L E A R. These ARE the logo. */
  --wordmark-opacities: 1, 0.78, 0.56, 0.34, 0.17;
}

/* Contrast, verified: ink on bg 13.8:1 · accent on bg 5.3:1 (AA body) ·
   on-ink on ink 13.8:1 · ink-soft on bg 6.4:1 */