/* Mawqif Sports — design tokens */
:root {
  /* Brand — logo green is the single source of truth */
  --mawqif-green:      #2E8B57;
  --mawqif-green-dark: #032B1B;
  --mawqif-green-light:#F0F7F3;
  --mawqif-off-white:  #F4F5F0;
  --mawqif-text:       #0B2019;
  --mawqif-muted:      #6C776F;

  /* Green scale (derived from brand, not independent hues) */
  --pitch-50:  var(--mawqif-green-light);
  --pitch-100: #D9EDE2;
  --pitch-200: #B3DBC5;
  --pitch-300: #7FC4A1;
  --pitch-400: #4FA97C;
  --pitch-500: var(--mawqif-green);
  --pitch-600: #256F46;
  --pitch-700: #1C5535;
  --pitch-800: #143D26;
  --pitch-900: var(--mawqif-green-dark);

  /* Brand surfaces — green is a fill, not body ink */
  --surface-brand:      var(--mawqif-green);
  --surface-brand-deep: var(--pitch-700);
  --surface-brand-soft: var(--mawqif-green-light);
  --on-brand:           #FFFFFF;
  --on-brand-muted:     rgba(255, 255, 255, 0.78);
  --on-brand-faint:     rgba(255, 255, 255, 0.55);
  --brand-rule:         rgba(255, 255, 255, 0.20);

  /* Allowed green text (only these roles) */
  --text-brand-display: var(--pitch-600);
  --text-brand-mono:    var(--pitch-800);
  --text-brand-link:    var(--pitch-700);

  /* Neutrals — --ink is body text only, never a background */
  --ink:     var(--mawqif-text);
  --ink-80:  rgba(11, 32, 25, 0.80);
  --ink-55:  rgba(11, 32, 25, 0.55);
  --stone:   var(--mawqif-muted);
  --chalk:   var(--mawqif-off-white);
  --surface: #FAFBF7;
  --rule:    #DDE3DE;
  --whistle: #F2C14E;
  --danger:  #B3261E;

  /* Dark image / media placeholders */
  --surface-dark: var(--mawqif-green-dark);

  /* Fonts — Plus Jakarta Sans is the primary face (geometric, rounded, modern).
     Mono is reserved for small technical/statistical accents only. */
  --font-sans:    'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Space — 4px base */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* Radius — restrained, logo-like rounding without SaaS cards */
  --r0: 0;
  --r1: 2px;
  --r2: 4px;
  --rf: 999px;

  /* Motion */
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --container: 1280px;
  --measure: 66ch;
  --gutter: 24px;
  --header-h: 72px;
  --header-h-scrolled: 56px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-base: 0.01ms;
    --t-slow: 0.01ms;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
  }
}