/* ==========================================================================
   Built Different — Colors & Type
   The single source of truth for color, typography, spacing, radius and
   motion tokens. Import this file in any HTML you build for the brand.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand palette (from uploads/colors.txt) ─────────────────────── */
  --bd-cream:        #f6f3ec;  /* page bg, light surface */
  --bd-bone:         #ece4da;  /* elevated surface, alt bg */
  --bd-stone:        #b9a590;  /* warm tan, secondary surface, dividers */
  --bd-clay:         #574c3f;  /* warm dark brown — logo background */
  --bd-charcoal:     #36302a;  /* darkest body text, deep surface */
  --bd-forest:       #374f2f;  /* primary accent — strength/health green */

  /* Tints + shades (computed for ramps) */
  --bd-forest-light: #4a6640;
  --bd-forest-dim:   #2a3d23;
  --bd-clay-light:   #6b5f52;
  --bd-stone-light:  #d9cdb9;
  --bd-stone-dim:    #9b8a72;

  /* ── Semantic — LIGHT mode (default) ─────────────────────────────── */
  --bd-bg:               var(--bd-cream);
  --bd-surface:          #ffffff;
  --bd-surface-elev:     var(--bd-bone);
  --bd-surface-hover:    #e5ddd0;
  --bd-border:           #d9d0c3;
  --bd-border-light:     var(--bd-bone);

  --bd-fg:               var(--bd-charcoal);  /* primary text */
  --bd-fg-muted:         #6b5f52;             /* secondary text */
  --bd-fg-dim:           #8a7e72;             /* tertiary / labels */
  --bd-fg-on-accent:     var(--bd-cream);     /* text on green */
  --bd-fg-on-clay:       var(--bd-cream);     /* text on dark brown */

  --bd-accent:           var(--bd-forest);
  --bd-accent-light:     var(--bd-forest-light);
  --bd-accent-dim:       var(--bd-forest-dim);
  --bd-accent-glow:      rgba(55,79,47,0.15);

  --bd-success:          #3d8a56;
  --bd-success-bg:       rgba(61,138,86,0.12);
  --bd-warning:          #c48a2a;
  --bd-warning-bg:       rgba(196,138,42,0.12);
  --bd-danger:           #c44040;
  --bd-danger-bg:        rgba(196,64,64,0.12);
  --bd-info:             #4a7a9e;
  --bd-info-bg:          rgba(74,122,158,0.12);

  --bd-glass:            rgba(255,255,255,0.85);
  --bd-glass-border:     rgba(55,79,47,0.15);

  /* ── Type ────────────────────────────────────────────────────────── */
  --bd-font-display: 'Barlow Condensed', 'Impact', 'Arial Narrow', sans-serif;
  --bd-font-body:    'Outfit', 'DM Sans', system-ui, sans-serif;
  --bd-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Body scale */
  --bd-text-xs:   12px;
  --bd-text-sm:   13px;
  --bd-text-base: 15px;
  --bd-text-md:   17px;
  --bd-text-lg:   20px;
  --bd-text-xl:   24px;

  /* Display scale */
  --bd-display-xs: 28px;
  --bd-display-sm: 36px;
  --bd-display-md: 48px;
  --bd-display-lg: 72px;
  --bd-display-xl: 112px;

  --bd-leading-tight: 1.1;
  --bd-leading-snug:  1.3;
  --bd-leading-body:  1.55;

  /* ── Spacing (4px base) ──────────────────────────────────────────── */
  --bd-space-1: 4px;
  --bd-space-2: 8px;
  --bd-space-3: 12px;
  --bd-space-4: 16px;
  --bd-space-5: 20px;
  --bd-space-6: 24px;
  --bd-space-8: 32px;
  --bd-space-10: 40px;
  --bd-space-12: 48px;
  --bd-space-16: 64px;

  /* ── Radii ───────────────────────────────────────────────────────── */
  --bd-radius-xs:  4px;
  --bd-radius-sm:  8px;
  --bd-radius-md:  12px;
  --bd-radius-lg:  16px;
  --bd-radius-xl:  20px;
  --bd-radius-2xl: 24px;
  --bd-radius-pill: 999px;

  /* ── Shadows / elevation ─────────────────────────────────────────── */
  --bd-shadow-sm: 0 1px 2px rgba(54,48,42,0.06), 0 1px 1px rgba(54,48,42,0.04);
  --bd-shadow-md: 0 4px 12px rgba(54,48,42,0.08), 0 2px 4px rgba(54,48,42,0.04);
  --bd-shadow-lg: 0 12px 32px rgba(54,48,42,0.12), 0 4px 8px rgba(54,48,42,0.06);
  --bd-shadow-xl: 0 24px 64px rgba(54,48,42,0.18), 0 8px 16px rgba(54,48,42,0.08);
  --bd-shadow-glow: 0 0 0 4px var(--bd-accent-glow);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --bd-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);    /* primary easing */
  --bd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --bd-spring-fast: 200ms;
  --bd-spring-base: 320ms;
  --bd-spring-slow: 500ms;
}

/* Dark / coach-portal mode */
[data-theme="dark"] {
  --bd-bg:               var(--bd-charcoal);
  --bd-surface:          var(--bd-clay);
  --bd-surface-elev:     #4a4138;
  --bd-surface-hover:    #5e5246;
  --bd-border:           #4a4138;
  --bd-border-light:     #6b5f52;

  --bd-fg:               var(--bd-cream);
  --bd-fg-muted:         #c2b6a4;
  --bd-fg-dim:           var(--bd-stone);

  --bd-accent:           #6b9b58;          /* brighter green for dark bg */
  --bd-accent-light:     #82b56e;
  --bd-accent-dim:       var(--bd-forest);
  --bd-accent-glow:      rgba(107,155,88,0.24);

  --bd-glass:            rgba(54,48,42,0.78);
  --bd-glass-border:     rgba(107,155,88,0.18);

  --bd-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --bd-shadow-md: 0 4px 12px rgba(0,0,0,0.32);
  --bd-shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
  --bd-shadow-xl: 0 24px 64px rgba(0,0,0,0.5);
}

/* ==========================================================================
   Element-level defaults — apply on body to get baseline typography.
   ========================================================================== */
.bd-root {
  font-family: var(--bd-font-body);
  font-size: var(--bd-text-base);
  line-height: var(--bd-leading-body);
  color: var(--bd-fg);
  background: var(--bd-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — Barlow Condensed, ALL CAPS, tight letter-spacing on the largest */
.bd-display-xl, .bd-display-lg, .bd-display-md, .bd-display-sm, .bd-display-xs,
.bd-h1, .bd-h2, .bd-h3, .bd-eyebrow, .bd-stat-value {
  font-family: var(--bd-font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--bd-leading-tight);
  color: var(--bd-fg);
  margin: 0;
}

.bd-display-xl { font-size: var(--bd-display-xl); letter-spacing: -2px; }
.bd-display-lg { font-size: var(--bd-display-lg); letter-spacing: -1px; }
.bd-display-md { font-size: var(--bd-display-md); letter-spacing: 0; }
.bd-display-sm { font-size: var(--bd-display-sm); letter-spacing: 0.5px; }
.bd-display-xs { font-size: var(--bd-display-xs); letter-spacing: 0.5px; }

.bd-h1 { font-size: var(--bd-display-sm); letter-spacing: 0.5px; }
.bd-h2 { font-size: var(--bd-text-xl); letter-spacing: 0.5px; font-weight: 800; }
.bd-h3 { font-size: var(--bd-text-md); letter-spacing: 1px; font-weight: 700; }

.bd-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--bd-fg-dim);
}

/* Body */
.bd-body, .bd-p {
  font-family: var(--bd-font-body);
  font-size: var(--bd-text-base);
  line-height: var(--bd-leading-body);
  color: var(--bd-fg);
  margin: 0;
}
.bd-body-sm  { font-size: var(--bd-text-sm); line-height: var(--bd-leading-snug); }
.bd-body-lg  { font-size: var(--bd-text-md); line-height: var(--bd-leading-body); }
.bd-muted    { color: var(--bd-fg-muted); }
.bd-dim      { color: var(--bd-fg-dim); }

/* Mono — for stats, weights, IDs, code */
.bd-mono, .bd-stat-value {
  font-family: var(--bd-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.bd-stat-value {
  font-size: var(--bd-display-sm);
  letter-spacing: -0.5px;
  text-transform: none;
  color: var(--bd-fg);
}
.bd-stat-label {
  font-family: var(--bd-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bd-fg-dim);
}