/* ============================================
   D.D SPORTS MANAGEMENT — DESIGN TOKENS
   ============================================ */

:root {

  /* ── COLORS ── */

  /* Dark backgrounds */
  --navy-950: #060912;
  --navy-900: #0A0F1E;
  --navy-800: #0D1533;
  --navy-700: #1A2A6B;
  --navy-600: #243494;

  /* Gold accents */
  --gold-500: #C9A227;
  --gold-400: #E5B93E;
  --gold-300: #F0C857;
  --gold-glow: rgba(201, 162, 39, 0.25);
  --gold-subtle: rgba(201, 162, 39, 0.08);

  /* Neutrals */
  --white: #FFFFFF;
  --gray-100: #F0F2F5;
  --gray-200: #D9DCE3;
  --gray-400: #9CA3AF;
  --gray-600: #4B5563;
  --gray-800: #1F2937;

  /* Semantic */
  --color-bg:        var(--navy-950);
  --color-bg-alt:    var(--navy-900);
  --color-bg-card:   var(--navy-800);
  --color-brand:     var(--navy-700);
  --color-accent:    var(--gold-500);
  --color-accent-lt: var(--gold-400);
  --color-text:      var(--white);
  --color-muted:     var(--gray-400);
  --color-border:    rgba(255, 255, 255, 0.08);

  /* ── TYPOGRAPHY ── */
  --font-heading: 'Oswald', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Font sizes */
  --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 */
  --text-7xl:  4.5rem;     /* 72px */
  --text-8xl:  6rem;       /* 96px */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Letter spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:    0em;
  --tracking-wide:      0.05em;
  --tracking-wider:     0.1em;
  --tracking-widest:    0.15em;

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

  /* Section padding */
  --section-py: var(--space-24);
  --section-px: var(--space-6);

  /* ── BORDER RADIUS ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.7);
  --shadow-gold:  0 0 0 2px var(--gold-500);
  --shadow-glow:  0 0 24px var(--gold-glow);

  /* ── TRANSITIONS ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 700ms;

  /* ── LAYOUT ── */
  --container-max: 1280px;
  --nav-height: 72px;
  --nav-height-mobile: 64px;

  /* ── Z-INDEX ── */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}