/* ============================================================
   YOUNGER LONGER – CSS VARIABLES
   Edit ONLY this file to retheme the entire site.
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary:       #C8637A;   /* Warm Rose – buttons, links, CTAs */
  --color-primary-dark:  #B0526A;   /* Darker rose – hover on primary */
  --color-secondary:     #7B3F6E;   /* Deep Plum – hover states, accents */
  --color-accent:        #D4A96A;   /* Soft Gold – highlights, badges, stars */
  --color-accent-light:  #F0DFC0;   /* Pale Gold – accent backgrounds */

  /* ── Neutrals ── */
  --color-background:    #FAF8F5;   /* Warm White – page background */
  --color-surface:       #F3EFEB;   /* Slightly darker – card backgrounds */
  --color-border:        #E8E0DC;   /* Blush Gray – dividers, borders */
  --color-text:          #2D2D2D;   /* Charcoal – body copy */
  --color-text-light:    #6B5F5F;   /* Muted brown-gray – captions, meta */
  --color-text-xlight:   #9E9090;   /* Very muted – placeholder, disabled */
  --color-white:         #FFFFFF;

  /* ── Typography ── */
  --font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    Georgia, "Times New Roman", serif;
  --font-mono:    "Courier New", Courier, monospace;

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-md:   1.125rem;   /* 18px */
  --font-size-lg:   1.25rem;    /* 20px */
  --font-size-xl:   1.5rem;     /* 24px */
  --font-size-2xl:  1.875rem;   /* 30px */
  --font-size-3xl:  2.25rem;    /* 36px */
  --font-size-4xl:  3rem;       /* 48px */

  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-base:   1.65;
  --line-height-loose:  1.8;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Spacing ── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Layout ── */
  --max-width:        1200px;
  --content-width:    720px;    /* Ideal reading width */
  --sidebar-width:    280px;

  /* ── Borders & Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(45, 45, 45, 0.08);
  --shadow-md:  0 4px 12px rgba(45, 45, 45, 0.10);
  --shadow-lg:  0 8px 24px rgba(45, 45, 45, 0.12);
  --shadow-xl:  0 16px 48px rgba(45, 45, 45, 0.14);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index ── */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-modal:   1000;
  --z-toast:   2000;
}