/* ============================================================
   RŌZ Hair Design System — V3.1 — Colors & Type
   Single source of truth for all design tokens. Supersedes the
   V2 source/tokens.css file (now retired).
   ============================================================ */

/* Web fonts. Cardo is the real brand serif (free, Google Fonts).
   Inter is the metric-compatible fallback for the licensed
   Neue Haas Unica face — used for body AND labels/eyebrows/caps.
   Univers LT Pro has been retired from the system. When licensed
   font files are dropped into fonts/, add @font-face blocks above
   these imports and the cascade will take over. */

:root {
  /* ---------- Color — Primary ---------- */
  --roz-black:       #333331;   /* Light Black, primary ink */
  --roz-white:       #FDFDF7;   /* Off-white surface */
  --roz-seaglass:    #A9BAB6;   /* Brand accent, hover, footer */
  --roz-dew:         #F5F3EE;   /* Default page background */

  /* ---------- Color — Secondary / Utility ---------- */
  --roz-overlay:     rgba(51, 51, 49, 0.5);  /* Image/video scrim */
  --roz-stroke:      #CCCCCB;                /* The only border color in the system */
  --roz-muted:       #999997;

  /* ---------- Color — Accent (editorial / seasonal only) ---------- */
  --roz-clay:        #C1886C;
  --roz-spruce:      #134852;

  /* ---------- Semantic aliases (foreground / background) ---------- */
  --bg:              var(--roz-dew);        /* page */
  --bg-alt:          var(--roz-white);      /* elevated surface */
  --bg-accent:       var(--roz-seaglass);   /* footer / accent block */
  --bg-ink:          var(--roz-black);      /* dark sections */

  --fg:              var(--roz-black);      /* primary text */
  --fg-muted:        var(--roz-muted);      /* secondary text */
  --fg-on-dark:      var(--roz-white);

  --border:          var(--roz-stroke);

  /* ---------- Type — Families ---------- */
  --ff-serif:   "Cardo", "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ff-sans:    "Neue Haas Unica", "Neue Haas Unica W1G", "Inter", "Helvetica Neue", Arial, sans-serif;
  --ff-label:   "Neue Haas Unica", "Neue Haas Unica W1G", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type — Sizes ---------- */
  --fs-display:    72px;   /* blog index hero, campaign */
  --fs-h1:         40px;
  --fs-h1-mob:     32px;
  --fs-h2:         32px;
  --fs-h2-mob:     28px;
  --fs-h3:         24px;
  --fs-h4:         18px;
  --fs-body-l:     16px;
  --fs-body-m:     14px;
  --fs-body-s:     12px;
  --fs-eyebrow-l:  16px;
  --fs-eyebrow-m:  12px;
  --fs-cta-m:      14px;
  --fs-cta-s:      12px;
  --fs-micro:      10px;

  /* ---------- Type — Line heights ---------- */
  --lh-display:    1.08;
  --lh-heading:    1.3;
  --lh-body:       1.5;
  --lh-ui:         1.4;
  --lh-tight:      1.2;
  --lh-read:       1.7;     /* long-form article body */

  /* ---------- Type — Letter spacing ---------- */
  --ls-eyebrow:    0.07em;
  --ls-label:      0.04em;
  --ls-body:       0.01em;
  --ls-body-s:     0.02em;

  /* ---------- Spacing (4/8 scale) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   40px;
  --sp-8:   56px;
  --sp-9:   80px;
  --sp-10:  100px;
  --sp-11:  120px;

  /* ---------- Layout ---------- */
  --container-max:    1440px;
  --gutter-desktop:   80px;
  --gutter-mobile:    24px;
  --nav-height:       67px;

  /* ---------- Radii — square-edge brand ---------- */
  --radius-none:  0;        /* Everything. Buttons, cards, fields, chips — all rectangular. No pills. */

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast:    160ms;
  --dur-med:     280ms;
  --dur-slow:    520ms;

  /* ---------- Elevation — none. The brand uses border-only. ---------- */
  /* Shadow tokens intentionally omitted. Use borders for separation. */
}

/* ============================================================
   Type primitives — semantic classes
   ============================================================ */
.h1, h1 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin: 0;
}
.h2, h2 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin: 0;
}
.h3, h3 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin: 0;
}
.h4, h4 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  margin: 0;
}
.display {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

@media (max-width: 768px) {
  .h1, h1 { font-size: var(--fs-h1-mob); }
  .h2, h2 { font-size: var(--fs-h2-mob); }
}

.eyebrow,
.eyebrow-l {
  font-family: var(--ff-label);
  font-size: var(--fs-eyebrow-l);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.eyebrow-m {
  font-family: var(--ff-label);
  font-size: var(--fs-eyebrow-m);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.p-l   { font-family: var(--ff-sans); font-size: var(--fs-body-l); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 400; }
.p-m   { font-family: var(--ff-sans); font-size: var(--fs-body-m); line-height: var(--lh-body); letter-spacing: var(--ls-body-s); font-weight: 400; }
.p-s   { font-family: var(--ff-sans); font-size: var(--fs-body-s); line-height: var(--lh-body); letter-spacing: var(--ls-body-s); font-weight: 400; }

.cta-m { font-family: var(--ff-sans); font-size: var(--fs-cta-m); line-height: var(--lh-body); letter-spacing: var(--ls-eyebrow); font-weight: 400; text-transform: uppercase; }
.cta-s { font-family: var(--ff-sans); font-size: var(--fs-cta-s); line-height: var(--lh-body); letter-spacing: var(--ls-eyebrow); font-weight: 400; text-transform: uppercase; }

.micro { font-family: var(--ff-sans); font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }