/* J&G's Hair Fashion — Design Tokens (":root")
   Matches the Adanola design system provided by the studio (palette, type, spacing, radius).
   Only change from source: 'Favorit' (proprietary) is substituted with Inter per the
   reference DESIGN.md ("Substitute: Inter"). All text pairings verified WCAG AA. */

:root {
  /* ---- Colors (Adanola palette, verbatim) ---- */
  --color-carbon-ink:    #000000; /* primary text, borders, hairlines, filled actions */
  --color-paper-white:   #ffffff; /* page canvas, card surfaces, text on dark */
  --color-soft-mist:     #e5e7eb; /* subtle surface alternation, dividers, skeletons */
  --color-warm-fog:      #f0efe7; /* off-white banding between rows/editorial sections */
  --color-blush-sand:    #f5ebd5; /* warm cream editorial highlight / seasonal accent */
  --color-smoke-charcoal:#333333; /* secondary text, input borders, subdued chrome */
  --color-onyx:          #1d1d1d; /* dark borders/separators (never the primary CTA) */
  --color-stone-gray:    #cccccc; /* placeholder fills, disabled, neutral swatch default */
  --color-slate:         #2f3440; /* cool charcoal — product-photography backdrop */
  --color-olive-drab:    #636355; /* warm muted — product-photography backdrop */
  --color-maroon-clay:   #523037; /* warm muted — product-photography backdrop */
  --color-deep-iris:     #222845; /* cool muted — product-photography backdrop */
  --color-pewter:        #677284; /* cool gray — product-photography backdrop */
  --color-driftwood:     #dfccbe; /* warm beige — product-photography backdrop */
  --color-pale-tide:     #badce4; /* cool pastel — editorial accent band */

  /* ---- Semantic aliases (J&G) ---- */
  --color-canvas:     var(--color-paper-white);
  --color-ink:        var(--color-carbon-ink);
  --color-secondary:  var(--color-smoke-charcoal);
  --color-line:       var(--color-carbon-ink);
  --surface-alt:      var(--color-soft-mist);
  --surface-warm:     var(--color-warm-fog);
  --surface-accent:   var(--color-blush-sand);
  --surface-tide:     var(--color-pale-tide);

  /* ---- Typography — Favorit substituted with Inter (proprietary source face) ---- */
  --font-primary: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-nunito-sans: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, sans-serif;
  /* Favorit licensing path: if the client licenses Favorit (Displaay Type Foundry),
     prepend 'Favorit' to --font-primary. Do NOT ship the webfont unlicensed. */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* ---- Typography — Scale (Adanola, verbatim) ---- */
  --text-body:    14px; --leading-body:    1.33; --tracking-body:    0.35px;
  --text-heading: 20px; --leading-heading: 1.2;  --tracking-heading: 0.5px;
  --text-display: 30px; --leading-display: 1.2;  --tracking-display: 0.75px;
  /* signature: display uses weight 400 (regular) — editorial caption, not bold ad type */
  --letter-spacing-brand: 0.025em; /* Favorit/Inter tight tracking fingerprint */

  /* ---- Spacing (Adanola, verbatim) ---- */
  --spacing-unit: 4px;
  --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px;
  --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px;

  /* ---- Layout (Adanola, verbatim) ---- */
  --page-max-width: 1440px;
  --section-gap: 64px;
  --card-padding: 16px;
  --element-gap: 8px;

  /* ---- Border Radius (Adanola, verbatim) ---- */
  --radius-md: 4px;
  --radius-tags: 0px; --radius-cards: 0px; --radius-images: 0px;
  --radius-inputs: 4px; --radius-buttons: 4px;

  /* ---- Elevation ---- */
  --shadow-none: none; /* deliberately flat — hairlines + whitespace + banding only */
}

/* ---- J&G additions (DESIGN_SYSTEM.md Addendum A, 2026-09-06) ---- */
:root {
  /* A1: hair-tone swatches, photography-derived, demo placeholders until real colorway photos exist */
  --hair-jet: #101010; --hair-espresso: #3a2a22; --hair-chocolate: #5b3d2e;
  --hair-honey: #b58453; --hair-auburn: #7a3b2a; --hair-blonde: #d8b98a;
  /* layout helpers (values on the 4px grid) */
  --nav-h: 64px; --gutter: 16px; --section-pad: 64px; --grid-row-gap: 64px;
}
@media (max-width: 767px) { :root { --nav-h: 56px; --section-pad: 48px; --grid-row-gap: 40px; } }
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }