/* ==========================================================================
   RED DUNE — DESIGN TOKENS
   Change a value here and it updates everywhere on the site.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- BRAND COLOUR */
  --brand:            #26215F;   /* deep indigo — primary brand colour        */
  --brand-deep:       #1A1642;   /* darker indigo for gradients and footers   */
  --brand-soft:       #4B468A;   /* lighter indigo for accents and borders    */
  --brand-tint:       #EEEDF6;   /* very light indigo wash for section bgs    */

  --accent:           #D9542B;   /* dune red-orange — CTAs and highlights     */
  --accent-hover:     #BF4522;
  --accent-soft:      #FDF0EA;
  --gold:             #E8A33D;   /* warm sand — stats, badges, icon details   */

  /* ------------------------------------------------------------------ TEXT */
  --heading:          #14123A;
  --body:             #5D666F;
  --muted:            #8B8F99;
  --on-dark:          #FFFFFF;
  --on-dark-muted:    rgba(255, 255, 255, .72);

  /* ------------------------------------------------------------ SURFACES */
  --bg:               #FFFFFF;
  --bg-alt:           #F7F8FB;
  --bg-dark:          #26215F;
  --card:             #FFFFFF;
  --border:           #E6E8F0;
  --border-dark:      rgba(255, 255, 255, .16);

  /* --------------------------------------------------------------- STATUS */
  --success:          #16A34A;
  --warning:          #D97706;
  --danger:           #DC2626;

  /* ----------------------------------------------------------- TYPOGRAPHY */
  --font-heading: "Red Hat Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero:      clamp(2.25rem, 5.2vw, 4rem);
  --fs-h1:        clamp(2rem, 4vw, 3rem);
  --fs-h2:        clamp(1.6rem, 2.9vw, 2.4rem);
  --fs-h3:        clamp(1.2rem, 1.9vw, 1.5rem);
  --fs-h4:        1.125rem;
  --fs-body:      1rem;
  --fs-sm:        .9375rem;
  --fs-xs:        .8125rem;

  --lh-tight:     1.15;
  --lh-heading:   1.25;
  --lh-body:      1.75;

  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* --------------------------------------------------------------- LAYOUT */
  --container:      1240px;
  --container-narrow: 860px;
  --gutter:         24px;
  --section-y:      clamp(56px, 8vw, 110px);

  /* --------------------------------------------------------------- SHAPES */
  --radius-sm:      8px;
  --radius:         14px;
  --radius-lg:      22px;
  --radius-pill:    999px;

  /* -------------------------------------------------------------- SHADOWS */
  --shadow-sm:  0 1px 2px rgba(20, 18, 58, .06), 0 1px 3px rgba(20, 18, 58, .05);
  --shadow:     0 4px 6px -1px rgba(20, 18, 58, .07), 0 10px 24px -6px rgba(20, 18, 58, .10);
  --shadow-lg:  0 12px 28px -8px rgba(20, 18, 58, .18), 0 30px 60px -20px rgba(20, 18, 58, .22);
  --shadow-brand: 0 12px 28px -10px rgba(38, 33, 95, .45);

  /* ------------------------------------------------------------ MOTION */
  --ease:       cubic-bezier(.4, 0, .2, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --t-fast:     .18s var(--ease);
  --t:          .28s var(--ease);
  --t-slow:     .6s var(--ease-out);

  /* ------------------------------------------------------------- Z-INDEX */
  --z-header:   1000;
  --z-drawer:   1100;
  --z-modal:    1200;
  --z-float:    900;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}