/* ============================================================
   DESIGN SYSTEM — Larry Dillon Author Website
   ============================================================ */

:root {

  /* ── Colors ── */
  --navy:          #1F3A52;
  --navy-deep:     #162C3F;
  --navy-mid:      #2C4E6F;
  --navy-light:    #3D6285;
  --sage:          #6B8E7F;
  --sage-light:    #A8BAB0;
  --sage-pale:     #D5E2DC;
  --cream:         #F5F3F0;
  --cream-dark:    #EAE7E2;
  --charcoal:      #2B2B2B;
  --charcoal-mid:  #4A4A4A;
  --charcoal-light:#6B6B6B;
  --gold:          #C9A961;
  --gold-light:    #DBBF7A;
  --white:         #FFFFFF;
  --black:         #0A0A0A;

  /* ── Semantic ── */
  --color-text:         var(--charcoal);
  --color-text-muted:   var(--charcoal-light);
  --color-text-inverse: var(--cream);
  --color-bg:           var(--cream);
  --color-bg-dark:      var(--navy);
  --color-bg-sage:      var(--sage);
  --color-accent:       var(--sage);
  --color-accent-warm:  var(--gold);
  --color-border:       rgba(31,58,82,0.12);

  /* ── Typography ── */
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Size scale (rem) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */

  /* ── Spacing (8px base unit) ── */
  --sp-1:  0.5rem;    /* 8px  */
  --sp-2:  1rem;      /* 16px */
  --sp-3:  1.5rem;    /* 24px */
  --sp-4:  2rem;      /* 32px */
  --sp-5:  3rem;      /* 48px */
  --sp-6:  4rem;      /* 64px */
  --sp-7:  5rem;      /* 80px */
  --sp-8:  6rem;      /* 96px */
  --sp-9:  8rem;      /* 128px */

  /* ── Layout ── */
  --max-w:        1200px;
  --max-w-narrow: 780px;
  --max-w-wide:   1400px;
  --gutter:       2rem;
  --gutter-sm:    1rem;

  /* ── Navigation ── */
  --nav-h: 72px;

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0.0, 1, 1);
  --ease:      cubic-bezier(0.4, 0.0, 0.2, 1);
  --t-fast:    0.15s var(--ease);
  --t-base:    0.3s  var(--ease);
  --t-slow:    0.5s  var(--ease-out);
  --t-slower:  0.7s  var(--ease-out);

  /* ── Shadows ── */
  --shadow-xs: 0 1px 3px rgba(31,58,82,0.08), 0 1px 2px rgba(31,58,82,0.06);
  --shadow-sm: 0 2px 8px rgba(31,58,82,0.10), 0 1px 4px rgba(31,58,82,0.06);
  --shadow-md: 0 4px 16px rgba(31,58,82,0.12), 0 2px 6px rgba(31,58,82,0.08);
  --shadow-lg: 0 8px 32px rgba(31,58,82,0.16), 0 4px 10px rgba(31,58,82,0.08);
  --shadow-xl: 0 16px 48px rgba(31,58,82,0.20), 0 6px 16px rgba(31,58,82,0.10);
  --shadow-2xl:0 24px 64px rgba(31,58,82,0.24);
  --glow-sage: 0 0 40px rgba(107,142,127,0.25);
  --glow-navy: 0 0 60px rgba(31,58,82,0.40);

  /* ── Borders ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Z-index ── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-nav:      200;
  --z-modal:    300;
  --z-toast:    400;
}