/* ============================================================
   DESIGN TOKENS — Andrew O'Bryan Wills & Estates
   All CSS custom properties for the entire design system.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOUR PALETTE — Raw values
     ---------------------------------------------------------- */

  /* Navy family */
  --color-navy:        #1B3A6B;   /* Primary — deep professional navy */
  --color-navy-dark:   #112649;   /* Hover states, dark headings */
  --color-navy-light:  #2C5282;   /* Links, interactive elements */
  --color-navy-muted:  #3D5A8A;   /* Secondary navy uses */

  /* Gold family */
  --color-gold:        #C9A96E;   /* Warm accent */
  --color-gold-dark:   #A8854A;   /* Gold hover */
  --color-gold-light:  #E8D5B0;   /* Gold tint, borders */

  /* Neutral palette */
  --color-white:       #FFFFFF;
  --color-cream:       #FAF9F7;   /* Page background */
  --color-cream-dark:  #F2EFE9;   /* Alternate section backgrounds */
  --color-gray-50:     #F9FAFB;
  --color-gray-100:    #F3F4F6;
  --color-gray-200:    #E5E7EB;
  --color-gray-300:    #D1D5DB;
  --color-gray-400:    #9CA3AF;
  --color-gray-500:    #6B7280;
  --color-gray-600:    #4B5563;
  --color-gray-700:    #374151;
  --color-gray-900:    #111827;

  /* ----------------------------------------------------------
     SEMANTIC COLOUR ALIASES
     ---------------------------------------------------------- */

  --color-bg:           var(--color-cream);
  --color-bg-alt:       var(--color-cream-dark);
  --color-bg-dark:      var(--color-navy);
  --color-text:         var(--color-gray-900);
  --color-text-muted:   var(--color-gray-600);
  --color-text-inverse: var(--color-white);
  --color-border:       var(--color-gray-200);
  --color-border-muted: var(--color-gray-100);
  --color-cta:          var(--color-navy);
  --color-cta-hover:    var(--color-navy-dark);
  --color-link:         var(--color-navy-light);
  --color-link-hover:   var(--color-navy);
  --color-accent:       var(--color-gold);

  /* ----------------------------------------------------------
     TYPOGRAPHY — Families & Weights
     ---------------------------------------------------------- */

  --font-serif:          'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:           'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:           'Courier New', Courier, monospace;

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

  /* ----------------------------------------------------------
     TYPE SCALE (rem-based)
     ---------------------------------------------------------- */

  --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 */

  /* ----------------------------------------------------------
     LINE HEIGHTS
     ---------------------------------------------------------- */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ----------------------------------------------------------
     SPACING SCALE (rem-based)
     ---------------------------------------------------------- */

  --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-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --max-width:           1200px;
  --max-width-prose:     720px;
  --section-padding-y:   clamp(4rem, 8vw, 7rem);
  --container-padding-x: clamp(1.5rem, 5vw, 4rem);

  /* ----------------------------------------------------------
     BORDERS
     ---------------------------------------------------------- */

  --border-radius:      4px;
  --border-radius-md:   8px;
  --border-radius-lg:   12px;
  --border-radius-full: 9999px;
  --border-width:       1px;
  --border-width-2:     2px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow:     0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */

  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */

  --z-base:   0;
  --z-raised: 10;
  --z-nav:    100;
  --z-modal:  200;
  --z-toast:  300;

}