/* =============================================================
   Pedaling Minds — Design Tokens
   colors_and_type.css
   -------------------------------------------------------------
   The single source of truth for color + typography across the
   marketing site, the digital coaching platform, slides and
   print assets. Token names mirror Tailwind / shadcn so they
   are easy to lift into Next.js or other framework projects.
   ============================================================= */

/* ---------- Fonts (Google Fonts; substitute pending real files) --- */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap");

:root {
  /* ----------------------------------------------------------
     CORE BRAND — sampled from the Pedaling Minds logo.
     Red + blue read patriotic / Olympic, anchoring Mike
     Friedman's 2008 Olympian credential. White + sky keep
     surfaces clean and bright; kids photography supplies warmth.
     ---------------------------------------------------------- */
  --pm-red-600:    #C01830;  /* primary brand red — pulled from logo */
  --pm-red-700:    #9B1226;  /* hover / pressed */
  --pm-red-500:    #DC2E47;  /* highlight, badges */
  --pm-red-100:    #FBE3E7;  /* tinted surface */

  --pm-blue-700:   #2D3F84;  /* darker depth blue */
  --pm-blue-600:   #4860A8;  /* primary brand blue — from logo */
  --pm-blue-500:   #6178BE;  /* secondary surface */
  --pm-blue-100:   #E4E8F5;  /* tinted surface */

  --pm-sky-500:    #4FA3D1;  /* Boulder sky / outdoor accent */
  --pm-sky-100:    #DCEEF7;

  /* Warm Colorado outdoor accents */
  --pm-sand-500:   #D4A574;  /* earth / dirt trail */
  --pm-sand-100:   #F5E9D7;
  --pm-paper:      #FFFFFF;  /* default page background — pure white */

  /* Success / signal */
  --pm-grass-600:  #4A7C3A;  /* trail green */
  --pm-grass-100:  #E2EDDA;
  --pm-amber-500:  #E8A33A;  /* helmet yellow / warning */
  --pm-amber-100:  #FAEBC9;

  /* Neutrals — warm gray, not cold slate */
  --pm-ink:        #1A1A1F;  /* near-black headlines */
  --pm-charcoal:   #2E2E36;
  --pm-graphite:   #4D4D57;  /* body copy */
  --pm-stone:      #75757F;
  --pm-mist:       #B5B5BD;
  --pm-fog:        #DDDDE2;
  --pm-shell:      #EEEEF1;
  --pm-snow:       #F6F6F8;
  --pm-white:      #FFFFFF;

  /* ----------------------------------------------------------
     SEMANTIC TOKENS — use these everywhere in product code.
     Raw color variables (above) are for the design system only.
     ---------------------------------------------------------- */
  --bg:            var(--pm-paper);
  --bg-alt:        var(--pm-snow);
  --bg-inverse:    var(--pm-ink);
  --bg-brand:      var(--pm-red-600);
  --bg-brand-soft: var(--pm-red-100);

  --surface:       var(--pm-white);
  --surface-alt:   var(--pm-snow);
  --surface-sunk:  var(--pm-shell);

  --fg:            var(--pm-ink);          /* primary text */
  --fg-2:          var(--pm-graphite);     /* body text */
  --fg-3:          var(--pm-stone);        /* muted / captions */
  --fg-on-brand:   var(--pm-white);
  --fg-on-dark:    var(--pm-paper);

  --border:        var(--pm-fog);
  --border-strong: var(--pm-mist);

  --accent:        var(--pm-red-600);
  --accent-alt:    var(--pm-blue-600);
  --link:          var(--pm-blue-700);
  --link-hover:    var(--pm-red-600);
  --focus-ring:    var(--pm-blue-500);

  --success:       var(--pm-grass-600);
  --warning:       var(--pm-amber-500);
  --danger:        var(--pm-red-600);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     Display → Barlow Condensed (athletic, jersey-number lineage
       used across cycling design language). Headlines feel
       sporty, kinetic, confidence-forward.
     Body    → Barlow (sister family) — humanist, friendly,
       and parent-readable at small sizes.
     Accent  → Caveat (handwritten) for sparing use on quotes,
       coach notes, kid-drawn-energy moments.
     ---------------------------------------------------------- */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Barlow", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-accent:  "Caveat", "Comic Sans MS", cursive;
  --font-mono:    ui-monospace, SFMono-Regular, "JetBrains Mono", monospace;

  /* Type scale — 1.250 (major third). Display is uppercased. */
  --fs-display-xl: clamp(56px, 7vw, 96px);   /* hero */
  --fs-display-lg: clamp(44px, 5.5vw, 72px); /* page H1 */
  --fs-display-md: 48px;                     /* section H2 */
  --fs-display-sm: 32px;                     /* card H3 */
  --fs-h4:         24px;
  --fs-h5:         20px;
  --fs-eyebrow:    14px;

  --fs-body-lg:    20px;  /* hero body */
  --fs-body:       17px;  /* default */
  --fs-body-sm:    15px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  /* Weights */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-black:      900;

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-base:       1.55;
  --lh-loose:      1.7;

  --tracking-tight: -0.01em;
  --tracking-eyebrow: 0.14em;

  /* ----------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----------------------------------------------------------
     RADII — soft, friendly. Kids brand, not corporate.
     ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     ELEVATION — single warm-tinted shadow stack.
     Avoid blue-cast greys; use ink tint so shadows feel sunlit.
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(26,26,31,0.06);
  --shadow-sm: 0 2px 6px rgba(26,26,31,0.08), 0 1px 2px rgba(26,26,31,0.04);
  --shadow-md: 0 8px 20px -6px rgba(26,26,31,0.14), 0 2px 6px rgba(26,26,31,0.05);
  --shadow-lg: 0 24px 48px -16px rgba(26,26,31,0.22), 0 4px 12px rgba(26,26,31,0.06);
  --shadow-brand: 0 12px 28px -10px rgba(192,24,48,0.45);

  /* Inner shadow for sunk surfaces */
  --shadow-inset: inset 0 1px 2px rgba(26,26,31,0.05);

  /* ----------------------------------------------------------
     MOTION
     Buttery, slightly bouncy — confidence, momentum, a bike
     finding balance. Never longer than 320ms for UI feedback.
     ---------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.36, 0.64, 1);
  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  320ms;

  /* Container widths */
  --container-narrow: 720px;
  --container:        1140px;
  --container-wide:   1320px;
}

/* =============================================================
   Semantic element styles — opt-in via class names so this
   sheet plays well alongside Tailwind / Elementor / custom CSS.
   ============================================================= */

.pm-body {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-base);
  color:       var(--fg-2);
  background:  var(--bg);
  font-feature-settings: "ss01", "cv11";
}

.pm-display-xl,
.pm-display-lg,
.pm-h2,
.pm-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
}
.pm-display-xl { font-size: var(--fs-display-xl); }
.pm-display-lg { font-size: var(--fs-display-lg); }
.pm-h2         { font-size: var(--fs-display-md); }
.pm-h3         { font-size: var(--fs-display-sm); font-weight: var(--fw-bold); }

.pm-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.pm-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.pm-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
  text-wrap: pretty;
}

.pm-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-2);
  text-wrap: pretty;
}

.pm-caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}

.pm-quote {
  font-family: var(--font-accent);
  font-weight: var(--fw-semibold);
  font-size: 36px;
  line-height: 1.15;
  color: var(--accent-alt);
}

.pm-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-standard);
}
.pm-link:hover { color: var(--link-hover); }