:root {
  /* === Core Brand === */
  --sl-plum:        #721F54;
  --sl-rose:        #9E3D68;
  --sl-navy:        #072446;

  /* === Supporting Accents === */
  --sl-gold:        #D4A017;
  --sl-warm-grey:   #6B5C52;

  /* === Typography — Families === */
  --sl-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --sl-font-body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sl-font-mono:    "SF Mono", "Fira Code", Consolas, monospace;

  /* === Typography — Scale (desktop) === */
  --sl-text-base:   1.0625rem;   /* 17px */
  --sl-text-sm:     0.82rem;     /* 14px — caption, meta, category label */
  --sl-text-md:     0.88rem;     /* 15px — nav, buttons, footer */
  --sl-text-lg:     1.12rem;     /* 19px — blockquote */
  --sl-text-lead:   1.18rem;     /* 20px — intro paragraph */
  --sl-text-h4:     1.24rem;     /* 21px */
  --sl-text-h3:     1.59rem;     /* 27px */
  --sl-text-h2:     2.00rem;     /* 34px */
  --sl-text-h1:     2.47rem;     /* 42px */

  /* === Typography — Line Heights === */
  --sl-leading-tight:   1.20;    /* H1 */
  --sl-leading-snug:    1.25;    /* H2 */
  --sl-leading-heading: 1.30;    /* H3 */
  --sl-leading-sub:     1.35;    /* H4 */
  --sl-leading-ui:      1.40;    /* Nav, buttons, labels */
  --sl-leading-small:   1.50;    /* Captions, meta */
  --sl-leading-body:    1.70;    /* Body text */
  --sl-leading-quote:   1.65;    /* Blockquote, lead */

  /* === Typography — Spacing === */
  --sl-space-heading-top:    2.82rem;  /* 48px — above H2, H3 */
  --sl-space-subheading-top: 1.88rem;  /* 32px — above H4, H5, H6 */
  --sl-space-paragraph:      0.94rem;  /* 16px — below body paragraphs */
  --sl-measure:              40rem;    /* 680px — max content width */

  /* === Typography — Colours === */
  --sl-text-body:    #334155;
  --sl-text-heading: #721F54;
  --sl-text-h4-clr:  #4A3045;
  --sl-text-meta:    #64748B;
  --sl-text-muted:   #6B7280;
  --sl-text-inverse: #FFFFFF;

  /* === Neutrals === */
  --sl-white:        #FFFFFF;
  --sl-bg-subtle:    #F8FAFC;
  --sl-bg-muted:     #F0F5FA;
  --sl-bg-warm:      #FAF8F5;
  --sl-border-light: #E2E8F0;
  --sl-border:       #CBD5E1;
  --sl-border-dark:  #64748B;
  --sl-charcoal:     #322F2C;

  /* === Footer === */
  --sl-footer-text:       #D1D5DB;
  --sl-footer-link:       #E2E8F0;
  --sl-footer-link-hover: #FFFFFF;
  --sl-footer-accent:     #D4A017;

  /* === Links === */
  --sl-link:         #9E3D68;
  --sl-link-hover:   #721F54;
  --sl-link-visited: #5A4165;

  /* === Buttons (primary — plum) === */
  --sl-btn-bg:        #721F54;
  --sl-btn-bg-hover:  #5A1844;
  --sl-btn-bg-active: #4A1238;
  --sl-btn-text:      #FFFFFF;

  /* === Buttons (secondary — navy) === */
  --sl-btn-alt-bg:        #072446;
  --sl-btn-alt-bg-hover:  #0A3666;
  --sl-btn-alt-text:      #FFFFFF;

  /* === Focus === */
  --sl-focus:        #9E3D68;
  --sl-focus-dark:   #D4A017;

  /* === Categories === */
  --sl-cat-menopause:   #A8223A;
  --sl-cat-wellbeing:   #1A7A5C;
  --sl-cat-stories:     #6B4FA0;
  --sl-cat-travel:      #1D6FA5;
  --sl-cat-inspiration: #A85A06;

  /* === Feedback === */
  --sl-success:    #166534;
  --sl-success-bg: #F0FDF4;
  --sl-success-bd: #86EFAC;
  --sl-warning:    #854D0E;
  --sl-warning-bg: #FEFCE8;
  --sl-warning-bd: #FDE047;
  --sl-error:      #991B1B;
  --sl-error-bg:   #FEF2F2;
  --sl-error-bd:   #FCA5A5;
  --sl-info:       #1E40AF;
  --sl-info-bg:    #EFF6FF;
  --sl-info-bd:    #93C5FD;

  /* === Layout (kept for component use) === */
  --sl-radius-sm:  0.25rem;
  --sl-radius-md:  0.5rem;
  --sl-radius-lg:  0.75rem;
}

/* === Mobile scale (< 768px) === */
@media (max-width: 767px) {
  :root {
    --sl-text-h1:   1.88rem;  /* 32px */
    --sl-text-h2:   1.59rem;  /* 27px */
    --sl-text-h3:   1.29rem;  /* 22px */
    --sl-text-h4:   1.12rem;  /* 19px */
    --sl-text-lead: 1.06rem;  /* 18px */
    --sl-text-lg:   1.00rem;  /* 17px — blockquote matches body on mobile */

    --sl-space-heading-top:    2.00rem;  /* 34px — tighter on mobile */
    --sl-space-subheading-top: 1.41rem;  /* 24px */
  }
}