/* ================================================================
   STACEY SOBERS — CSS DESIGN TOKENS
   Theme: Trinidadian Carnival × African Heritage
   Change values here to retheme the entire site.
   WP equivalent: theme.json (WP 5.8+) / Theme Customizer
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Raleway:wght@300;400;600;700&family=Dancing+Script:wght@600;700&family=Open+Sans:wght@300;400;600;700&display=swap');

:root {

  /* ════════════════════════════════════════════
     COLOUR: Trinidadian Palette
     Inspired by the flag, Carnival, and steelpan
     ════════════════════════════════════════════ */
  --c-trini-red:       #CC1122;   /* Trinidad flag red                    */
  --c-trini-red-deep:  #8B0010;   /* Deep crimson                         */
  --c-trini-red-light: #E84455;   /* Bright carnival red                  */
  --c-carnival-orange: #E06020;   /* Soca/mas costume orange              */
  --c-carnival-amber:  #F0A030;   /* Warm amber — Carnival lights         */
  --c-steelpan:        #1A3862;   /* Steel pan instrument blue            */
  --c-steelpan-light:  #2A5490;   /* Lighter steel blue                   */
  --c-bougainvillea:   #C8306A;   /* National flower pink-magenta         */
  --c-hummingbird:     #2A7A3A;   /* National bird emerald green          */

  /* ════════════════════════════════════════════
     COLOUR: African Heritage Palette
     Kente cloth, Adinkra, earth tones
     ════════════════════════════════════════════ */
  --c-terra-deep:   #7A2E0A;
  --c-terra:        #C06030;   /* Terracotta — earth                   */
  --c-terra-mid:    #D07040;
  --c-terra-light:  #E09060;

  --c-gold-deep:    #906010;
  --c-gold:         #C89830;   /* African gold — royalty               */
  --c-gold-light:   #DDB040;
  --c-gold-bright:  #F0C850;

  --c-kente-gold:   #C89830;
  --c-kente-red:    #CC1122;   /* Now matches Trini red                */
  --c-kente-green:  #1E4010;
  --c-kente-black:  #100408;

  /* ════════════════════════════════════════════
     COLOUR: Dark Backgrounds — Caribbean Night Sky
     Deep navy-black inspired by a Trinidad night
     ════════════════════════════════════════════ */
  --c-dark-1:  #030210;   /* Almost black, Caribbean night        */
  --c-dark-2:  #08041A;   /* Navigation + footer background       */
  --c-dark-3:  #100828;   /* Card backgrounds — midnight indigo   */
  --c-dark-4:  #1C1235;   /* Borders and raised surfaces          */

  --c-brown-1: #502010;
  --c-brown-2: #703020;
  --c-brown-3: #906050;

  /* ════════════════════════════════════════════
     COLOUR: Light — Savanna + Caribbean Beaches
     ════════════════════════════════════════════ */
  --c-cream-1: #FAF4EC;
  --c-cream-2: #F4E8D4;
  --c-cream-3: #E8D8B8;
  --c-cream-4: #D8C49A;

  /* ════════════════════════════════════════════
     SEMANTIC ALIASES
     ════════════════════════════════════════════ */
  --color-primary:        var(--c-trini-red);
  --color-primary-dark:   var(--c-trini-red-deep);
  --color-primary-light:  var(--c-trini-red-light);
  --color-secondary:      var(--c-gold);
  --color-secondary-dark: var(--c-gold-deep);
  --color-secondary-light:var(--c-gold-light);
  --color-accent-orange:  var(--c-carnival-orange);
  --color-accent-blue:    var(--c-steelpan);
  --color-accent-green:   var(--c-hummingbird);
  --color-bg-dark:        var(--c-dark-2);
  --color-bg-mid:         var(--c-dark-3);
  --color-bg-light:       var(--c-cream-2);
  --color-bg-white:       var(--c-cream-1);
  --color-text-dark:      var(--c-dark-3);
  --color-text-mid:       var(--c-brown-1);
  --color-text-light:     var(--c-cream-1);
  --color-text-muted:     var(--c-brown-2);
  --color-border:         var(--c-cream-3);
  --color-border-dark:    var(--c-dark-4);

  /* ════════════════════════════════════════════
     TYPOGRAPHY
     ════════════════════════════════════════════ */
  --font-heading:    'Playfair Display', Georgia, serif;
  --font-sub:        'Raleway', Arial, sans-serif;
  --font-body:       'Open Sans', Arial, sans-serif;
  --font-accent:     'Dancing Script', cursive;

  --fs-hero:  clamp(2.2rem, 5vw, 4.8rem);
  --fs-h1:    clamp(1.9rem, 4vw, 3.4rem);
  --fs-h2:    clamp(1.5rem, 3vw, 2.4rem);
  --fs-h3:    clamp(1.15rem, 2vw, 1.7rem);
  --fs-h4:    clamp(1rem, 1.5vw, 1.2rem);
  --fs-body:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.75rem;
  --fs-label: 0.68rem;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    700;
  --fw-black:   900;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.65;
  --lh-loose:  1.9;

  /* ════════════════════════════════════════════
     SPACING (8-pt scale)
     ════════════════════════════════════════════ */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* ════════════════════════════════════════════
     LAYOUT
     ════════════════════════════════════════════ */
  --max-w:          1280px;
  --container-px:   clamp(1rem, 4vw, 3rem);

  /* Total header height: topbar(36) + nav(66) + stripe(8) = 110px */
  --topbar-h:       36px;
  --mainnav-h:      66px;
  --stripe-h:       8px;
  --nav-h:          110px;

  --section-py:     clamp(4rem, 8vw, 8rem);

  /* ════════════════════════════════════════════
     BORDERS & RADII
     ════════════════════════════════════════════ */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   28px;
  --r-full: 9999px;
  --r-arch: 50% 50% 0 0 / 60% 60% 0 0;

  /* ════════════════════════════════════════════
     SHADOWS
     ════════════════════════════════════════════ */
  --sh-sm:      0 2px 8px rgba(8,2,8,.2);
  --sh-md:      0 4px 20px rgba(8,2,8,.3);
  --sh-lg:      0 8px 40px rgba(8,2,8,.45);
  --sh-gold:    0 4px 24px rgba(200,152,48,.35);
  --sh-terra:   0 4px 24px rgba(192,96,48,.35);
  --sh-red:     0 4px 24px rgba(204,17,34,.4);
  --sh-header:  0 4px 24px rgba(0,0,0,.6);

  /* ════════════════════════════════════════════
     TRANSITIONS
     ════════════════════════════════════════════ */
  --t-fast: 150ms ease;
  --t-base: 300ms ease;
  --t-slow: 500ms cubic-bezier(.4,0,.2,1);

  /* ════════════════════════════════════════════
     Z-INDEX
     ════════════════════════════════════════════ */
  --z-base:    0;
  --z-above:   10;
  --z-overlay: 100;
  --z-nav:     1000;
  --z-modal:   2000;
  --z-toast:   3000;
}