/**
 * StrideCore — Default Brand
 * ============================
 * The agency's house style. This is what the framework looks like
 * out of the box — before any client brand is applied.
 *
 * Designed to:
 *   - Make every pattern look polished immediately
 *   - Set a professional quality bar for onboarding
 *   - Work beautifully in demos and proposals
 *   - Serve as the reference implementation for brand packs
 *
 * Copy this file to client-xxx.css and override per client.
 */

:root {

  /* ──────────────────────────────────────────────────────
     BRAND COLOURS
     ────────────────────────────────────────────────────── */

  /* Primary — confident blue, professional without being corporate */
  --brand-primary:       #2563EB;
  --brand-primary-light: #60A5FA;
  --brand-primary-dark:  #1D4ED8;

  /* Secondary — rich dark slate for headers, hero sections, footers */
  --brand-secondary:       #0F172A;
  --brand-secondary-light: #1E293B;
  --brand-secondary-dark:  #020617;

  /* Accent — warm amber that contrasts well against both primary and secondary */
  --brand-accent:       #F59E0B;
  --brand-accent-light: #FCD34D;
  --brand-accent-dark:  #D97706;

  /* Status colours (used by forms, alerts, badges) */
  --brand-success: #16A34A;
  --brand-warning: #F59E0B;
  --brand-error:   #DC2626;
  --brand-info:    var(--brand-primary);

  /* Borders */
  --brand-border: var(--grey-200);


  /* ──────────────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────────────── */

  /* Inter — the modern agency standard. Clean, highly legible,
     excellent at every weight. Free on Google Fonts.
     Falls back gracefully to system sans-serif. */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale — slightly larger base for readability */
  --font-size-base: 16px;
  --font-size-xs:   13px;
  --font-size-sm:   14px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-xxl:  32px;

  /* Heading scale — generous but not overwhelming */
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 28px;
  --font-size-h4: 22px;

  /* Line heights — comfortable reading */
  --line-height-body:    1.65;
  --line-height-heading: 1.15;


  /* ──────────────────────────────────────────────────────
     SECTION BACKGROUNDS
     ────────────────────────────────────────────────────── */

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

  /* Gradient — used in hero patterns and CTA backgrounds */
  --section-gradient: linear-gradient(135deg, var(--brand-primary), #7C3AED);

  /* Hero overlays */
  --hero-overlay-color: rgba(15, 23, 42, 0.55);
  --hero-overlay-blend: multiply;


  /* ──────────────────────────────────────────────────────
     COMPONENT TOKENS
     ────────────────────────────────────────────────────── */

  /* Buttons — pill-shaped, satisfying padding, subtle lift on hover */
  --button-radius:    var(--radius-pill);
  --button-padding-y: 14px;
  --button-padding-x: 28px;
  --button-shadow:    0 2px 8px rgba(37, 99, 235, 0.2);

  /* Cards — clean with soft shadow, enough radius to feel modern */
  --card-radius:      var(--radius-lg);
  --card-shadow:      0 1px 3px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.06);
  --card-background:  #ffffff;

  /* Panels — subtle muted background */
  --panel-background: var(--section-muted);
  --panel-radius:     var(--radius-lg);

  /* Metrics — use primary colour for impact numbers */
  --metric-color: var(--brand-primary);

  /* CTAs — primary background with white text */
  --cta-background: var(--brand-primary);
  --cta-text-color: #ffffff;


  /* ──────────────────────────────────────────────────────
     LAYOUT
     ────────────────────────────────────────────────────── */

  --content-width:      1200px;
  --content-width-wide: 1400px;

  --section-padding-y: var(--space-80);
  --grid-gap:          var(--space-32);


  /* ──────────────────────────────────────────────────────
     MICRO-BRANDING
     ────────────────────────────────────────────────────── */

  /* These small details add up to a polished feel */
  --border-width:           2px;
  --link-underline-offset:  4px;
  --hover-lift:             translateY(-4px);
}