/* ==========================================================================
   Soft Girl Ops™ — Brand System tokens
   --------------------------------------------------------------------------
   Cream + dusty pinks + italic gold + aubergine. Editorial, soft, considered.
   Authored from the canonical SGO brand reference.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500;1,6..72,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ---- Neutrals (the surfaces) ---- */
  --cream:          #FAF7F2;   /* primary page background */
  --ivory:          #F5F0E8;   /* secondary surfaces */
  --bone:           #ECE5D8;   /* quiet surface accent / dividers */

  /* ---- Pink / mauve family ---- */
  --mauve-pale:     #EFE2E8;   /* anchor moments — loudest soft bg */
  --pink-highlight: #F4C8D6;   /* highlighter underline bar */
  --mauve-soft:     #C9A7B8;   /* soft accents */
  --mauve:          #A87E96;   /* italic emphasis + eyebrow labels */
  --mauve-deep:     #8B6379;   /* readable secondary text, flourishes */

  /* ---- Deep purples ---- */
  --aubergine:      #2A1F4A;   /* primary text, wordmark, headlines */
  --aubergine-deep: #1B1438;   /* strong contrast fills */
  --aubergine-soft: #5A4F76;   /* secondary headings, muted accents */
  --aubergine-pale: #E6E1EE;   /* aubergine-tinted card bg */
  --plum-deep:      #3D1F36;   /* darkest deliberate plum — sidebar fills */

  /* ---- Signature accent ---- */
  --gold:           #C4943D;   /* italic "Girl" + 1–2 emphasized words */
  --gold-hover:     #B3842F;
  --gold-pale:      #FAF3EB;   /* gold-emphasis card bg */

  /* ---- Body + warm grays ---- */
  --charcoal:       #2C2C2C;
  --warm-gray:      #6B6560;

  /* ---- State accents ---- */
  --sage-pale:      #E8F0EC;
  --sage-deep:      #5F8A75;
  --lilac-bg:       #EDE3F1;

  /* ---- Semantic aliases ---- */
  --bg:             var(--cream);
  --bg-raised:      var(--ivory);
  --bg-sunken:      var(--bone);
  --bg-inverse:     var(--plum-deep);
  --fg:             var(--aubergine);
  --fg-secondary:   var(--aubergine-soft);
  --fg-muted:       var(--warm-gray);
  --fg-on-inverse:  var(--cream);
  --accent:         var(--gold);
  --border:         #E4DCD0;
  --border-strong:  #D2C8B8;

  /* ---- Type ---- */
  --font-display:   "Newsreader", Georgia, serif;
  --font-serif:     "Playfair Display", Georgia, serif;
  --font-sans:      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:      "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.6;
  --lh-relaxed: 1.72;

  /* ---- Spacing ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(42, 31, 74, 0.05);
  --shadow-md: 0 1px 2px rgba(42, 31, 74, 0.04), 0 8px 24px rgba(42, 31, 74, 0.07);
  --shadow-lg: 0 2px 4px rgba(42, 31, 74, 0.05), 0 16px 44px rgba(42, 31, 74, 0.12);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}