/* ============================================================
   Cecilia Fernández — Design Tokens
   Load BEFORE styles.css. Edit here to rebrand the whole site.
   ============================================================ */

:root {

  /* === Brand palette === */
  --color-bg:          #f8f3fb;   /* page background — soft lilac-white */
  --color-surface:     #f0e8f5;   /* secondary surface — pale lavender */
  --color-surface-2:   #e7d7f0;   /* hover / tertiary — light violet */

  --color-accent:      #AF44A2;   /* primary — warm purple */
  --color-accent-dk:   #96398C;   /* hover / press — deep plum */
  --color-accent-2:    #c97bc3;   /* secondary — soft orchid */
  --color-accent-3:    #e8c5e5;   /* tint — pale blush */

  --color-ink:         #312b24;   /* primary text — warm brown-black */
  --color-ink-2:       #6b5d56;   /* secondary text — warm brown-gray */
  --color-ink-3:       #a89891;   /* tertiary / disabled — warm mist */

  --color-border:      rgba(175, 68, 162, 0.15);
  --color-border-dark: rgba(248, 243, 251, 0.2);  /* borders on dark bg */

  /* === Footer === */
  --color-footer-bg:     #541e5f;
  --color-footer-lede:   rgba(244, 247, 252, 0.75);
  --color-footer-border: rgba(244, 247, 252, 0.3);
  --color-footer-legal:  rgba(244, 247, 252, 0.5);

  /* === Nav scrolled state === */
  --color-nav-scrolled-bg: rgba(255, 255, 255, 0.88);
  --color-nav-scrolled-bd: rgba(148, 163, 184, 0.25);

  /* === Typography === */
  --font-serif: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* === Spacing (8px base) === */
  --sp-1: 4px;   --sp-2: 8px;    --sp-3: 12px;   --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;   --sp-7: 48px;   --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px; --sp-11: 160px;

  /* === Radii === */
  --r-sm: 8px;  --r-md: 16px;  --r-lg: 20px;  --r-xl: 24px;  --r-2xl: 32px;  --r-pill: 999px;

  /* === Shadows === */
  --shadow-card: 0 4px 24px rgba(15, 23, 42, 0.08);
  --shadow-nav:  0 2px 16px rgba(15, 23, 42, 0.06);

  /* === Motion === */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med:  320ms;

  /* === Layout === */
  --max-w: 1440px;
  --gutter: 96px;

}