/* =========================================================================
   Short Hairstyles Edit — Design Tokens
   -------------------------------------------------------------------------
   Values are measured from the reference editorial layout
   (southernliving.com article + author pages, Nov 2026) and re-expressed
   as our own tokens. Three layers:
     1. Primitives   — raw values (never use directly in components)
     2. Semantic     — roles (use these in components)
     3. Responsive   — values that change at breakpoints
   To rebrand: change only the "BRAND" block in section 1.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     1. PRIMITIVES
     ----------------------------------------------------------------------- */

  /* BRAND — swap these for shorthairstylesedit.com branding.
     Navy palette (matches assets/logo.svg): primary #1e2a44 (logo navy, outline buttons,
     feedback icons), secondary #3e5c8a (accent rules, FAQ border, progress),
     tertiary #eef2f7 (pale blue author band), cta #2b4c7e (primary CTA). */
  --brand-primary:   #1e2a44;
  --brand-secondary: #3e5c8a;
  --brand-tertiary:  #eef2f7;
  --brand-cta:       #2b4c7e;
  --brand-tint:      #e6ecf5; /* pale navy tint used for highlights */

  /* Neutrals — the reference uses black at fixed alphas, not a grey ramp */
  --black:     #000000;
  --white:     #ffffff;
  --black-95:  rgba(0, 0, 0, 0.95); /* primary text */
  --black-65:  rgba(0, 0, 0, 0.65); /* secondary text, captions, bylines in cards */
  --black-30:  rgba(0, 0, 0, 0.30); /* disabled, shadows */
  --black-15:  rgba(0, 0, 0, 0.15); /* hairlines, card borders, dividers */
  --black-05:  rgba(0, 0, 0, 0.05); /* footer / recirc band fill */
  --grey-efef: #efefef;             /* opaque subtle fill, progress track */
  --grey-5959: #595959;             /* visited link */
  --link-blue: #014ecb;             /* in-body link color */

  /* Font families
     Reference: "Nyse" (condensed editorial serif, display), "Lato" (UI/body),
     "RamaSlabE" (slab, rare expressive use). Nyse/RamaSlab are proprietary,
     so we map to free Google Fonts with the closest feel. */
  --font-display: "Playfair Display", "Nyse", Georgia, "Times New Roman", serif;
  --font-sans:    "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-slab:    "Roboto Slab", "RamaSlabE", "Times New Roman", serif;

  /* Font weights */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Font sizes (rem, 16px root) — reference scale */
  --fs-10: 0.625rem;  /* 10 */
  --fs-11: 0.6875rem; /* 11 */
  --fs-12: 0.75rem;   /* 12 */
  --fs-14: 0.875rem;  /* 14 */
  --fs-16: 1rem;      /* 16 */
  --fs-18: 1.125rem;  /* 18 */
  --fs-20: 1.25rem;   /* 20 */
  --fs-23: 1.4375rem; /* 23 */
  --fs-26: 1.625rem;  /* 26 */
  --fs-29: 1.8125rem; /* 29 */
  --fs-32: 2rem;      /* 32 */
  --fs-36: 2.25rem;   /* 36 */
  --fs-41: 2.5625rem; /* 41 */
  --fs-46: 2.875rem;  /* 46 */
  --fs-52: 3.25rem;   /* 52 */

  /* Line heights */
  --lh-110: 1.1;
  --lh-120: 1.2;
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-150: 1.5;
  --lh-body: 1.5556; /* 18px / 28px — measured article paragraphs */

  /* Letter spacing */
  --ls-none:  0;
  --ls-label-sm: 0.75px; /* card kicker, small labels */
  --ls-label:    1px;    /* nav, footer nav, uppercase buttons */

  /* Spacing (4px base; names = px) */
  --space-0:   0;
  --space-2:   0.125rem;
  --space-4:   0.25rem;
  --space-6:   0.375rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-28:  1.75rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-56:  3.5rem;
  --space-64:  4rem;
  --space-72:  4.5rem;
  --space-80:  5rem;
  --space-96:  6rem;

  /* Borders */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  /* Radii — the reference is almost entirely square */
  --radius-0:    0;
  --radius-sm:   8px;   /* CTA pill-ish button */
  --radius-pill: 50px;  /* tag chips */
  --radius-full: 50%;   /* round icon buttons */

  /* Shadows */
  --shadow-header: 0 2px 6px 0 rgba(0, 0, 0, 0.15);

  /* Icon sizes */
  --icon-12: 0.75rem;
  --icon-16: 1rem;
  --icon-20: 1.25rem;
  --icon-24: 1.5rem;

  /* Layout widths */
  --w-content:   37.5rem;  /* 600 — article/author reading column */
  --w-article:   62.25rem; /* 996 — article header + content + rail */
  --w-rail:      18.75rem; /* 300 — right ad/rail column */
  --w-container: 76.25rem; /* 1220 — header, footer, card grids */
  --w-list-media: 30rem;   /* 480 — images inside numbered list items */

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Z-index */
  --z-header: 100;
  --z-overlay: 200;

  /* -----------------------------------------------------------------------
     2. SEMANTIC
     ----------------------------------------------------------------------- */

  /* Text */
  --color-text:            var(--black-95);
  --color-text-secondary:  var(--black-65);
  --color-text-disabled:   var(--black-30);
  --color-text-inverse:    var(--white);
  --color-text-brand:      var(--brand-primary);

  /* Links */
  --color-link:            var(--link-blue);
  --color-link-hover:      var(--black);
  --color-link-visited:    var(--grey-5959);
  --color-link-quiet:      var(--black-95); /* byline / footer links */

  /* Surfaces */
  --color-bg:              var(--white);
  --color-bg-subtle:       var(--black-05);   /* footer, recirc band */
  --color-bg-subtle-opaque:var(--grey-efef);
  --color-bg-brand:        var(--brand-tertiary); /* author header band */
  --color-bg-highlight:    var(--brand-tint);

  /* Borders */
  --color-border:          var(--black-15);
  --color-border-strong:   var(--black-65);
  --color-border-ink:      var(--black-95);
  --color-border-accent:   var(--brand-secondary);
  --color-border-brand:    var(--brand-primary);

  /* Actions */
  --color-cta-bg:          var(--brand-cta);
  --color-cta-text:        var(--white);
  --color-action:          var(--brand-primary);

  /* Progress bar */
  --color-progress-track:  var(--grey-efef);
  --color-progress-fill:   var(--brand-secondary);

  /* Semantic typography roles (family / weight / line-height / tracking).
     Sizes for headline + title roles are responsive (section 3). */
  --type-headline-family: var(--font-display);
  --type-headline-weight: var(--fw-semibold);
  --type-headline-lh:     var(--lh-120);

  --type-title-family:    var(--font-display);
  --type-title-weight:    var(--fw-semibold);
  --type-title-lh:        var(--lh-120);

  --type-body-family:     var(--font-sans);
  --type-body-weight:     var(--fw-regular);

  --type-label-family:    var(--font-sans);
  --type-label-weight:    var(--fw-bold);

  /* -----------------------------------------------------------------------
     3. RESPONSIVE (mobile first: values below are < 50em / 800px)
     ----------------------------------------------------------------------- */

  /* Headlines  (mobile → desktop)                 reference name */
  --fs-headline-400: var(--fs-32); /* → 46  article H1 */
  --fs-headline-300: var(--fs-29); /* → 36 */
  --fs-headline-200: var(--fs-23); /* → 29  section heads, "Related Articles" */
  --fs-headline-100: var(--fs-18); /* → 23 */

  /* Titles — list item titles, card titles, FAQ title */
  --fs-title-300: var(--fs-23);    /* → 29  FAQ box title, author name */
  --fs-title-200: var(--fs-20);    /* → 23  list item title, card title, H2 */
  --fs-title-100: var(--fs-18);
  --fs-title-50:  var(--fs-16);

  /* Body — constant across breakpoints */
  --fs-body-200: var(--fs-20);
  --fs-body-100: var(--fs-18);     /* article paragraphs */

  /* Utility (UI text) */
  --fs-utility-300: var(--fs-16);  /* dek / subheading, author fields */
  --fs-utility-200: var(--fs-14);  /* byline, chips, card byline */
  --fs-utility-100: var(--fs-12);  /* captions, photo credit */

  /* Labels (uppercase UI) */
  --fs-label-300: var(--fs-14);    /* nav, footer nav, outline button */
  --fs-label-200: var(--fs-12);    /* card kicker */
  --fs-label-100: var(--fs-11);

  /* Layout rhythm */
  --header-height: 3.5rem;         /* compact sticky bar: 56 mobile → 64 desktop */
  --page-gutter: var(--space-16);
  --section-gap: var(--space-48);
}

/* Breakpoints (reference): 34em (544), 50em (800), 64em (1024), 70em (1120).
   Custom properties cannot be used inside @media, so keep these in sync:
   --bp-sm: 34em; --bp-md: 50em; --bp-lg: 64em; --bp-xl: 70em; */

@media (min-width: 50em) {
  :root {
    --fs-headline-400: var(--fs-46);
    --fs-headline-300: var(--fs-36);
    --fs-headline-200: var(--fs-29);
    --fs-headline-100: var(--fs-23);
    --fs-title-300:    var(--fs-29);
    --fs-title-200:    var(--fs-23);
    --header-height:   4rem;
    --page-gutter:     var(--space-24);
  }
}

@media (min-width: 70em) {
  :root {
    --page-gutter: var(--space-32);
  }
}