/* ============================================================
   SKY JIU JITSU - Design Tokens (Light Theme - V2.1)
   ============================================================ */

:root {
  /* ---- Backgrounds ---- */
  --bg-primary:     #FFFFFF;
  --bg-elevated:    #F5F5F5;
  --bg-surface:     #EEEEEE;
  --bg-warm:        #F8F6F3;
  --bg-warm-light:  #F0EDE8;

  /* ---- Dark footer (stays dark) ---- */
  --footer-bg:       #0A0A0A;
  --footer-text:     #B0B0B0;
  --footer-heading:  #FFFFFF;
  --footer-muted:    #6B6B6B;
  --footer-border:   rgba(255, 255, 255, 0.08);

  /* ---- Accent Colours ---- */
  --accent-blue:       #3A6EA5;
  --accent-blue-light: #5A8EC5;
  --accent-blue-glow:  rgba(58, 110, 165, 0.15);
  --accent-warm:       #D4B896;
  --accent-warm-dark:  #A08060;
  --accent-cta:        #3A6EA5;
  --accent-cta-hover:  #2D5A8A;
  --accent-cta-glow:   rgba(58, 110, 165, 0.15);

  /* ---- Text ---- */
  --text-primary:   #1A1A1A;
  --text-secondary: #555555;
  --text-muted:     #999999;

  /* ---- Borders & Dividers ---- */
  --border-subtle:  rgba(0, 0, 0, 0.06);
  --border-medium:  rgba(0, 0, 0, 0.12);
  --border-accent:  var(--accent-blue);

  /* ---- Overlays (hero sections still need dark overlays) ---- */
  --overlay-dark:   rgba(10, 10, 10, 0.55);
  --overlay-darker: rgba(10, 10, 10, 0.7);
  --overlay-hero:   linear-gradient(135deg, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.25) 100%);

  /* ---- Typography ---- */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --fs-hero:    clamp(4rem, 10vw, 9rem);
  --fs-h1:      clamp(3rem, 6vw, 5.5rem);
  --fs-h2:      clamp(2rem, 4vw, 3.5rem);
  --fs-h3:      clamp(1.5rem, 2.5vw, 2rem);
  --fs-h4:      clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.125rem);
  --fs-body-lg: clamp(1.125rem, 1.3vw, 1.25rem);
  --fs-small:   clamp(0.8125rem, 0.9vw, 0.875rem);
  --fs-tag:     0.75rem;

  --lh-tight:   1.1;
  --lh-heading: 1.15;
  --lh-body:    1.7;

  --ls-display: 0.04em;
  --ls-heading: 0.03em;
  --ls-tag:     0.12em;

  /* ---- Spacing (8px base) ---- */
  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 5rem;      /* 80px */
  --space-3xl: 7.5rem;    /* 120px */
  --space-4xl: 10rem;     /* 160px */

  --section-pad: clamp(5rem, 10vh, 8rem);

  /* ---- Layout ---- */
  --max-width:    1280px;
  --content-width: 960px;
  --narrow-width:  720px;
  --nav-height:    80px;

  /* ---- Radius (increased for softer/rounder feel) ---- */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ---- Shadows (soft for light theme) ---- */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 4px 20px var(--accent-blue-glow);
  --shadow-cta:  0 4px 20px var(--accent-cta-glow);

  /* ---- Glass-morphism ---- */
  --glass-bg:     rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.04);

  /* ---- Transitions ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    0.15s;
  --duration-normal:  0.3s;
  --duration-slow:    0.5s;
  --duration-journey: 0.8s;
}