/*
 * SMYN design tokens — single source of truth for the palette (§3.1 of spec v2,
 * official brand book p.5). Mirrored in the Elementor kit global colors
 * (import/elementor-site-settings.json).
 * Warm neutrals only — no pure greys anywhere. Monstera is for small details only.
 */
:root{
  --smyn-terracotta:#822E27;       /* Primary accent: CTAs, links, active states, dark anchor cards */
  --smyn-terracotta-hover:#93382F;
  --smyn-terracotta-deep:#521A15;  /* gradients, pressed states */
  --smyn-champagne:#D8CCB8;        /* neutral surfaces, lines, light-on-dark text */
  --smyn-petal:#FAE3E3;            /* warm near-white pink, soft surfaces */
  --smyn-monstera:#6C7D58;         /* small details only: open-status, ticks — never large surfaces */
  --smyn-mocha:#7A6358;            /* secondary text, muted labels */
  --smyn-ink:#1A1714;              /* headlines, dark backgrounds */
  --smyn-cream:#FDFAF7;            /* page background */
  /* Muted text needs two values, not one: darkening for cream fixes the light
     surfaces and breaks the dark ones. Measured against WCAG AA (4.5:1 small):
     --smyn-muted      on cream #FDFAF7 = 5.61:1, on champagne #EDE3D2 = 4.59:1
     --smyn-muted-dark on ink   #1A1714 = 4.64:1
     The single old value #8C786E scored 4.02 / 3.29 / 4.27 and failed all three. */
  --smyn-muted:#74615A;            /* captions, FROM labels — on light surfaces */
  --smyn-muted-dark:#948075;       /* the same role on ink/dark surfaces */
  --smyn-line:#D5C9B8;             /* hairlines on light */
  --smyn-line-dark:#1A17142E;

  /* Derived working tones (rebrand table) */
  --smyn-terracotta-grad-2:#61201B;    /* header gradient stop 2 */
  --smyn-terracotta-grad-dark:#5A1D18; /* dark terracotta gradient */
  --smyn-line-champagne:#CDBFA9;
  --smyn-mocha-dark:#6B584E;
  --smyn-hover-surface:#F1E9DC;
  --smyn-monstera-dark:#4F5E40;
  --smyn-monstera-light:#A3B08C;
  --smyn-error:#B0453B;            /* closed-status / error red (terracotta family) */

  /* ---------------------------------------------------------------------
   * Type stacks — the Brand Book, and only the Brand Book.
   *
   * Glacial Indifference is the primary brand font everywhere a visitor reads:
   * body, headings, labels, navigation, buttons, prices, forms, catalogue,
   * WooCommerce, footer, reviews, account UI. The four role tokens below
   * therefore resolve to the SAME family — they stay separate so a role can be
   * re-pointed later without hunting through the stylesheets, not because they
   * are different faces.
   *
   * Jost is NOT a second typography system. It sits behind Glacial purely as
   * glyph coverage: Glacial has no pound sign and no middot, so in "£80" the
   * digits render in Glacial and only the £ comes from Jost, and in
   * "BROWS · LASHES" only the separator does. Browsers fall back per glyph, not
   * per run, so the rest of the string stays on the brand face.
   * ------------------------------------------------------------------- */

  --smyn-font-display:"Glacial Indifference", "Jost", sans-serif;
  --smyn-font-body:"Glacial Indifference", "Jost", sans-serif;
  --smyn-font-label:"Glacial Indifference", "Jost", sans-serif;
  /* Editorial accent only — never body, nav, buttons, prices, forms or Woo UI. */
  --smyn-font-script:"Snell Roundhand", "Glacial Indifference", sans-serif;

  /* Kept as the historical alias so nothing breaks mid-refactor. */
  --smyn-font-main:var(--smyn-font-body);

  /* The only weights Glacial Indifference has. Every role now resolves to it,
     so 300/500/600/800 are not available anywhere: asking for one would make
     the browser round to the nearest real face and the declaration a lie. */
  --smyn-w-regular:400;
  --smyn-w-bold:700;
  --smyn-w-label:700;
  --smyn-w-label-strong:700;

  /* Line heights */
  --smyn-lh-display:1.05;
  --smyn-lh-heading:1.15;
  --smyn-lh-body:1.65;
  --smyn-lh-tight:1.25;

  /* Tracking */
  --smyn-ls-display:-.02em;
  --smyn-ls-label:.16em;
  --smyn-ls-label-tight:.10em;

  /* Sizes — the floors the brief sets, expressed once.
     functional >= 13px, body 15-17px, service names 17-22px responsive. */
  --smyn-fs-micro:13px;
  --smyn-fs-label:clamp(13px, .82vw, 14px);
  --smyn-fs-body:clamp(15px, 1.02vw, 17px);
  --smyn-fs-service:clamp(17px, 1.32vw, 22px);
  --smyn-fs-price:clamp(17px, 1.25vw, 21px);
}