/* ============================================================
   BROWN EARTH — Design Tokens
   All values defined once here; consumed everywhere else.
   ============================================================ */

:root {

  /* ── Color Palette ──────────────────────────────────────── */

  /* Primary — deep navy (existing brand) */
  --clr-primary:        #14133D;
  --clr-primary-dark:   #0D0C2B;
  --clr-primary-light:  #23226B;

  /* Accent — steel blue (from footer gradient, already brand-approved) */
  --clr-accent:         #0769AA;
  --clr-accent-dark:    #055789;
  --clr-accent-light:   #1A8FD1;

  /* Neutrals */
  --clr-white:          #FFFFFF;
  --clr-gray-50:        #F8F9FA;
  --clr-gray-100:       #F1F2F4;
  --clr-gray-200:       #E4E6EA;
  --clr-gray-300:       #CDD0D8;
  --clr-gray-400:       #9DA2AE;
  --clr-gray-500:       #6B7280;
  --clr-gray-600:       #4B5563;
  --clr-gray-700:       #374151;
  --clr-gray-800:       #1F2937;
  --clr-gray-900:       #111827;

  /* Status */
  --clr-success:        #22C55E;
  --clr-success-bg:     #DCFCE7;
  --clr-success-text:   #15803D;
  --clr-warning:        #F59E0B;
  --clr-warning-bg:     #FEF3C7;
  --clr-warning-text:   #92400E;
  --clr-error:          #EF4444;
  --clr-error-bg:       #FEE2E2;
  --clr-error-text:     #B91C1C;

  /* Surfaces */
  --clr-surface:        #FFFFFF;
  --clr-surface-alt:    #F8F9FA;
  --clr-bg:             #FFFFFF;

  /* Text */
  --clr-text:           #1F2937;
  --clr-text-muted:     #6B7280;
  --clr-text-faint:     #9DA2AE;
  --clr-text-on-dark:   #E7E7EC;

  /* Footer gradient */
  --clr-footer-from:    #0769AA;
  --clr-footer-to:      #11133C;

  /* ── Typography ─────────────────────────────────────────── */

  --font:               "Poppins", system-ui, -apple-system, sans-serif;

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

  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-extrabold:   800;

  --leading-none:       1;
  --leading-tight:      1.1;
  --leading-snug:       1.3;
  --leading-normal:     1.5;
  --leading-relaxed:    1.65;
  --leading-loose:      1.85;

  --tracking-tight:     -0.03em;
  --tracking-snug:      -0.015em;
  --tracking-normal:    0em;
  --tracking-wide:      0.025em;
  --tracking-wider:     0.06em;
  --tracking-widest:    0.12em;

  /* ── Spacing Scale (8px base) ───────────────────────────── */

  --sp-1:   0.25rem;    /*   4px */
  --sp-2:   0.5rem;     /*   8px */
  --sp-3:   0.75rem;    /*  12px */
  --sp-4:   1rem;       /*  16px */
  --sp-5:   1.25rem;    /*  20px */
  --sp-6:   1.5rem;     /*  24px */
  --sp-8:   2rem;       /*  32px */
  --sp-10:  2.5rem;     /*  40px */
  --sp-12:  3rem;       /*  48px */
  --sp-16:  4rem;       /*  64px */
  --sp-20:  5rem;       /*  80px */
  --sp-24:  6rem;       /*  96px */
  --sp-32:  8rem;       /* 128px */

  /* ── Border Radius ──────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 14px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:   0 8px 28px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:   0 20px 50px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.07);
  --shadow-card: 0 2px 8px rgba(20,19,61,0.06), 0 1px 3px rgba(20,19,61,0.04);
  --shadow-card-hover: 0 8px 32px rgba(20,19,61,0.11), 0 4px 12px rgba(20,19,61,0.06);

  /* ── Z-index ────────────────────────────────────────────── */

  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-drawer:  1100;
  --z-modal:   1200;
  --z-toast:   1300;

  /* ── Transitions ────────────────────────────────────────── */

  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   0.15s;
  --dur-base:   0.25s;
  --dur-slow:   0.4s;

  --transition:       var(--dur-base) var(--ease);
  --transition-fast:  var(--dur-fast) var(--ease);
  --transition-slow:  var(--dur-slow) var(--ease);

  /* ── Layout ─────────────────────────────────────────────── */

  --container-max: 1440px;
  --nav-height:    72px;
  --nav-scrolled:  60px;
}