/* ============================================================
   DENALI WordPress Theme — global-variables.css
   Single source of truth for ALL design tokens.
   Import this file first in every stylesheet.
   ============================================================ */

:root {

  /* ──────────────────────────────────────────────────────────
     BRAND COLOURS  (primary palette)
  ────────────────────────────────────────────────────────── */
  --primary:                  #244c0d;   /* Deep forest green  */
  --primary-light:            #3f6927;   /* Medium green       */
  --primary-dim:              #a3d486;   /* Soft green         */
  --primary-fixed-dim:        #a3d486;   /* Alias              */
  --primary-container:        #3b6524;   /* Dark green         */
  --primary-fixed:            #bff19f;   /* Pale green         */
  --on-primary:               #ffffff;
  --on-primary-fixed:         #082100;

  /* Secondary (blue) */
  --secondary:                #00629d;
  --secondary-container:      #3aa9ff;
  --secondary-fixed:          #cfe5ff;
  --on-secondary:             #ffffff;

  /* Tertiary (slate) */
  --tertiary:                 #3b4358;
  --tertiary-container:       #525a70;
  --on-tertiary:              #ffffff;
  --on-tertiary-container:    #cad2ec;

  /* ──────────────────────────────────────────────────────────
     SURFACE & BACKGROUND TOKENS
  ────────────────────────────────────────────────────────── */
  --surface:                  #f8f9ff;
  --surface-bright:           #f8f9ff;
  --surface-low:              #eff4ff;
  --surface-container:        #e5eeff;
  --surface-container-low:    #eff4ff;
  --surface-container-high:   #dce9ff;
  --surface-highest:          #d3e4fe;
  --surface-white:            #ffffff;

  /* Text on surface */
  --on-surface:               #0b1c30;
  --on-surface-variant:       #42493d;
  --on-dark:                  #213145;

  /* Outline */
  --outline:                  #73796c;
  --outline-variant:          #c2c9b9;

  /* ──────────────────────────────────────────────────────────
     GLASS / OVERLAY TOKENS
  ────────────────────────────────────────────────────────── */
  --glass-fill:               rgba(255, 255, 255, 0.80);
  --glass-border:             rgba(255, 255, 255, 0.20);

  /* ──────────────────────────────────────────────────────────
     GRADIENTS
  ────────────────────────────────────────────────────────── */
  --gradient-energy:          linear-gradient(135deg, #0693e7 0%, #3b6524 100%);
  --gradient-hero:            linear-gradient(to right, rgba(0,0,0,.60) 0%, rgba(0,0,0,.18) 100%);

  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY
  ────────────────────────────────────────────────────────── */
  --font-family:              'Inter', system-ui, sans-serif;

  --fs-xs:                    0.75rem;    /*  12px */
  --fs-sm:                    0.875rem;   /*  14px */
  --fs-base:                  1rem;       /*  16px */
  --fs-lg:                    1.25rem;    /*  20px */
  --fs-xl:                    1.875rem;   /*  30px */
  --fs-2xl:                   2rem;       /*  32px */
  --fs-3xl:                   3rem;       /*  48px */
  --fs-4xl:                   4.5rem;     /*  72px */

  /* ──────────────────────────────────────────────────────────
     SPACING
  ────────────────────────────────────────────────────────── */
  --space-xs:                 0.5rem;
  --space-sm:                 0.75rem;
  --space-md:                 1rem;
  --space-lg:                 1.5rem;
  --space-xl:                 2rem;
  --space-2xl:                3rem;
  --space-3xl:                4rem;
  --space-section:            7.5rem;
  --gutter:                   2rem;

  /* ──────────────────────────────────────────────────────────
     BORDER RADII
  ────────────────────────────────────────────────────────── */
  --radius-sm:                0.5rem;
  --radius-md:                1rem;
  --radius-lg:                1.5rem;
  --radius-xl:                2rem;
  --radius-2xl:               2.5rem;
  --radius-full:              9999px;

  /* ──────────────────────────────────────────────────────────
     SHADOWS
  ────────────────────────────────────────────────────────── */
  --shadow-sm:                0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:                0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:                0 12px 40px rgba(0,0,0,.12);
  --shadow-xl:                0 24px 60px rgba(0,0,0,.14);

  /* ──────────────────────────────────────────────────────────
     TRANSITIONS
  ────────────────────────────────────────────────────────── */
  --ease-out:                 cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:              cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:            150ms;
  --duration-base:            300ms;
  --duration-slow:            600ms;
  --duration-slower:          800ms;

  /* ──────────────────────────────────────────────────────────
     LAYOUT
  ────────────────────────────────────────────────────────── */
  --container-max:            80rem;    /* 1280px */
  --container-narrow:         52rem;    /*  832px */

  /* ──────────────────────────────────────────────────────────
     LEGACY ALIASES
     Map older/page-specific variable names used by each
     page's original CSS to the canonical tokens above.
     This lets migrated page stylesheets work with zero edits.
  ────────────────────────────────────────────────────────── */

  /* about.css short-hand aliases */
  --primary-dim:              var(--primary-fixed-dim);
  --primary-ctr:              var(--primary-container);
  --secondary-ctr:            var(--secondary-container);
  --surface-ctr:              var(--surface-container);
  --surface-hi:               var(--surface-container-high);
  --on-surface-var:           var(--on-surface-variant);
  --outline-var:              var(--outline-variant);
  --glass:                    var(--glass-fill);
  --font:                     var(--font-family);
  --ease-spring:              var(--ease-spring);
  --dur-fast:                 var(--duration-fast);
  --dur-base:                 var(--duration-base);
  --dur-slow:                 var(--duration-slow);
  --dur-slower:               var(--duration-slower);
  --r-sm:                     var(--radius-sm);
  --r-md:                     var(--radius-md);
  --r-lg:                     var(--radius-lg);
  --r-xl:                     var(--radius-xl);
  --r-2xl:                    var(--radius-2xl);
  --r-full:                   var(--radius-full);
  --section:                  var(--space-section);

  /* denali-contact.css --color-* aliases */
  --color-primary:                    var(--primary);
  --color-primary-container:          var(--primary-container);
  --color-primary-fixed:              var(--primary-fixed);
  --color-primary-fixed-dim:          var(--primary-fixed-dim);
  --color-on-primary:                 var(--on-primary);
  --color-on-primary-fixed:           var(--on-primary-fixed);
  --color-secondary:                  var(--secondary);
  --color-secondary-container:        var(--secondary-container);
  --color-on-secondary:               var(--on-secondary);
  --color-tertiary:                   var(--tertiary);
  --color-on-tertiary:                var(--on-tertiary);
  --color-on-tertiary-container:      var(--on-tertiary-container);
  --color-background:                 var(--surface);
  --color-on-background:              var(--on-surface);
  --color-surface:                    var(--surface);
  --color-surface-bright:             var(--surface-bright);
  --color-surface-container:          var(--surface-container);
  --color-surface-container-low:      var(--surface-container-low);
  --color-surface-container-high:     var(--surface-container-high);
  --color-surface-container-highest:  var(--surface-highest);
  --color-surface-container-lowest:   var(--surface-white);
  --color-on-surface:                 var(--on-surface);
  --color-on-surface-variant:         var(--on-surface-variant);
  --color-outline-variant:            var(--outline-variant);
  --color-glass-fill:                 var(--glass-fill);
}