/**
 * StrideCore — Design Tokens
 * ===========================
 * Global tokens shared across all brands.
 * Brand packs override colours, fonts, and component tokens.
 *
 * IMPORTANT: Do not put brand-specific values here.
 * Use /brands/client-xxx.css for per-client overrides.
 */

:root {

  /* --------------------------------------------------------
     GREY SCALE
     -------------------------------------------------------- */
  --grey-50:  #F8FAFC;
  --grey-100: #F1F5F9;
  --grey-200: #E2E8F0;
  --grey-300: #CBD5E1;
  --grey-400: #94A3B8;
  --grey-500: #64748B;
  --grey-600: #475569;
  --grey-700: #334155;
  --grey-800: #1E293B;
  --grey-900: #0F172A;

  /* --------------------------------------------------------
     SPACING SCALE (pixel values)
     -------------------------------------------------------- */
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* Semantic spacing aliases (used by patterns and blueprints) */
  --space-xs:  var(--space-4);
  --space-s:   var(--space-8);
  --space-m:   var(--space-16);
  --space-l:   var(--space-24);
  --space-xl:  var(--space-48);
  --space-xxl: var(--space-64);
  --space-xxxl: var(--space-96);

  /* --------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-m:    6px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* --------------------------------------------------------
     SHADOWS
     -------------------------------------------------------- */
  --shadow-soft:   0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.10);
  --shadow-hard:   0 10px 30px rgba(0, 0, 0, 0.15);

  /* --------------------------------------------------------
     LAYOUT
     -------------------------------------------------------- */
  --content-width:      1200px;
  --content-width-wide: 1400px;

  /* --------------------------------------------------------
     TYPOGRAPHY (defaults — overridden by brand packs)
     -------------------------------------------------------- */
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent:  var(--font-heading);

  --font-size-xs:   13px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-xxl:  32px;
  --font-size-h1:   48px;
  --font-size-h2:   36px;
  --font-size-h3:   28px;
  --font-size-h4:   22px;

  --line-height-body:    1.6;
  --line-height-heading: 1.2;

  /* --------------------------------------------------------
     COLOUR DEFAULTS (overridden by every brand pack)
     -------------------------------------------------------- */
  --brand-primary:       #1E6FFF;
  --brand-primary-light: #4D93FF;
  --brand-primary-dark:  #1554C7;
  --brand-secondary:     #0F172A;
  --brand-accent:        #FFB800;
  --white:               #ffffff;

  /* --------------------------------------------------------
     SECTION BACKGROUNDS
     -------------------------------------------------------- */
  --section-light:  #ffffff;
  --section-muted:  var(--grey-50);
  --section-dark:   var(--brand-secondary);

  /* Gradient (optional — brand packs can override) */
  --gradient-primary: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));

  /* Hero overlays */
  --hero-overlay-color: rgba(0, 0, 0, 0.4);
  --hero-overlay-blend: multiply;

  /* --------------------------------------------------------
     COMPONENT TOKENS (defaults — brand packs can override)
     -------------------------------------------------------- */
  --button-radius:    var(--radius-pill);
  --button-padding-y: var(--space-12);
  --button-padding-x: var(--space-20);
  --button-shadow:    var(--shadow-soft);

  --card-radius:     var(--radius-md);
  --card-shadow:     var(--shadow-soft);
  --card-background: #ffffff;

  --panel-background: var(--section-muted);
  --panel-radius:     var(--radius-md);

  --metric-color: var(--brand-primary);

  --cta-background: var(--brand-primary);
  --cta-text-color: #ffffff;

  /* --------------------------------------------------------
     LAYOUT TOKENS
     -------------------------------------------------------- */
  --section-padding-y: var(--space-64);
  --grid-gap:          var(--space-32);

  /* --------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* --------------------------------------------------------
     MICRO-BRANDING (defaults — brand packs can override)
     -------------------------------------------------------- */
  --border-width:           2px;
  --link-underline-offset:  4px;
  --hover-lift:             translateY(-4px);
}