/* =========================================================
   WODBUDDY DESIGN TOKENS — colors_and_type.css
   =========================================================
   Light theme. Dark theme TBD post-launch.
   Import: <link rel="stylesheet" href="colors_and_type.css">
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =========================================================
     BRAND RED  — the only color allowed as a CTA signal.
     ========================================================= */
  --wb-red-50:  #FEF2F2;   /* tinted bg, selected fill */
  --wb-red-100: #FDE5E5;   /* hover on tint */
  --wb-red-200: #FBC9C9;
  --wb-red-300: #F89B9B;   /* disabled red */
  --wb-red-400: #F26464;
  --wb-red-500: #E63946;   /* ★ primary brand */
  --wb-red-600: #D02936;   /* hover / pressed */
  --wb-red-700: #A8202B;   /* deep accent */
  --wb-red-800: #7E1820;

  /* =========================================================
     WORKOUT TYPE PALETTE — semantic, used on WOD cards/badges
     only. Never as general UI accent.
     ========================================================= */
  --wb-skill:        #E63946;  /* Skill / Strength — brand red */
  --wb-fortime:      #2A6F7A;  /* For Time — deep teal */
  --wb-amrap:        #C97B1F;  /* AMRAP — amber/ochre */
  --wb-emom:         #5B4B8A;  /* EMOM — muted indigo */
  --wb-conditioning: #2D6A4F;  /* Conditioning — forest */

  /* =========================================================
     NEUTRALS (ink scale)
     ========================================================= */
  --wb-ink-900: #0F0F10;   /* primary text */
  --wb-ink-700: #2A2A2D;   /* secondary text */
  --wb-ink-500: #6B6B70;   /* tertiary / subtitle */
  --wb-ink-400: #9A9AA0;   /* placeholder / disabled text */
  --wb-ink-300: #C9C9CE;   /* divider */
  --wb-ink-200: #E5E5E8;   /* default border */
  --wb-ink-100: #F2F2F4;   /* surface tint */
  --wb-ink-50:  #F8F8FA;   /* page background */
  --wb-white:   #FFFFFF;

  /* =========================================================
     STATUS
     ========================================================= */
  --wb-success: #198754;
  --wb-warning: #C97B1F;
  --wb-danger:  #DC2626;
  --wb-info:    #2A6F7A;

  /* =========================================================
     SEMANTIC ROLES
     ========================================================= */
  --wb-bg:           var(--wb-ink-50);
  --wb-surface:      var(--wb-white);
  --wb-surface-tint: var(--wb-ink-100);
  --wb-border:       var(--wb-ink-200);
  --wb-divider:      var(--wb-ink-300);

  --wb-fg:           var(--wb-ink-900);
  --wb-fg-secondary: var(--wb-ink-700);
  --wb-fg-muted:     var(--wb-ink-500);
  --wb-fg-disabled:  var(--wb-ink-400);

  --wb-accent:       var(--wb-red-500);
  --wb-accent-hover: var(--wb-red-600);
  --wb-accent-tint:  var(--wb-red-50);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --wb-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wb-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale (mobile-first; px) */
  --wb-text-display: 32px;
  --wb-text-h1:      24px;
  --wb-text-h2:      20px;
  --wb-text-h3:      17px;
  --wb-text-body:    15px;
  --wb-text-sm:      13px;
  --wb-text-xs:      11px;

  --wb-weight-regular:  400;
  --wb-weight-medium:   500;
  --wb-weight-semibold: 600;
  --wb-weight-bold:     700;
  --wb-weight-black:    800;

  --wb-line-tight:  1.15;
  --wb-line-snug:   1.3;
  --wb-line-normal: 1.5;

  --wb-track-tight: -0.02em;
  --wb-track-snug:  -0.015em;
  --wb-track-eyebrow: 0.08em;

  /* =========================================================
     SPACING — 4pt grid. Use multiples only; never invent.
     ========================================================= */
  --wb-space-1:  4px;
  --wb-space-2:  8px;
  --wb-space-3:  12px;
  --wb-space-4:  16px;
  --wb-space-5:  20px;
  --wb-space-6:  24px;
  --wb-space-8:  32px;
  --wb-space-10: 40px;
  --wb-space-12: 48px;
  --wb-space-16: 64px;

  /* =========================================================
     RADIUS
     ========================================================= */
  --wb-radius-sm:   8px;    /* chips, icon tiles */
  --wb-radius-md:  12px;    /* ★ default — cards, inputs, buttons */
  --wb-radius-lg:  16px;    /* hero cards, big containers */
  --wb-radius-xl:  20px;    /* phone-style surfaces */
  --wb-radius-full: 9999px; /* pills, avatars */

  /* =========================================================
     ELEVATION — used sparingly. Borders carry most separation.
     ========================================================= */
  --wb-shadow-sm:    0 1px 2px  rgba(15, 15, 16, 0.04);
  --wb-shadow-md:    0 2px 8px  rgba(15, 15, 16, 0.06);
  --wb-shadow-lg:    0 8px 24px rgba(15, 15, 16, 0.08);
  --wb-shadow-focus: 0 0 0 4px  rgba(230, 57, 70, 0.18);

  /* =========================================================
     MOTION
     ========================================================= */
  --wb-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --wb-dur-fast:  120ms;
  --wb-dur-base:  200ms;
  --wb-dur-slow:  320ms;
}

/* =========================================================
   SEMANTIC TYPE CLASSES — drop on any element
   ========================================================= */
.wb-display { font-family: var(--wb-font-display); font-size: var(--wb-text-display); font-weight: var(--wb-weight-bold); letter-spacing: var(--wb-track-tight); line-height: var(--wb-line-tight); color: var(--wb-fg); }
.wb-h1      { font-family: var(--wb-font-display); font-size: var(--wb-text-h1);      font-weight: var(--wb-weight-bold); letter-spacing: var(--wb-track-snug); line-height: var(--wb-line-snug); color: var(--wb-fg); }
.wb-h2      { font-family: var(--wb-font-display); font-size: var(--wb-text-h2);      font-weight: var(--wb-weight-semibold); letter-spacing: -0.01em; line-height: var(--wb-line-snug); color: var(--wb-fg); }
.wb-h3      { font-family: var(--wb-font-display); font-size: var(--wb-text-h3);      font-weight: var(--wb-weight-semibold); line-height: var(--wb-line-snug); color: var(--wb-fg); }
.wb-body    { font-family: var(--wb-font-body);    font-size: var(--wb-text-body);    font-weight: var(--wb-weight-regular); line-height: var(--wb-line-normal); color: var(--wb-fg); }
.wb-small   { font-family: var(--wb-font-body);    font-size: var(--wb-text-sm);      font-weight: var(--wb-weight-regular); line-height: var(--wb-line-normal); color: var(--wb-fg-muted); }
.wb-eyebrow { font-family: var(--wb-font-body);    font-size: var(--wb-text-xs);      font-weight: var(--wb-weight-semibold); letter-spacing: var(--wb-track-eyebrow); text-transform: uppercase; color: var(--wb-fg-muted); }
.wb-mono    { font-family: var(--wb-font-mono);    font-size: var(--wb-text-sm);      color: var(--wb-fg-secondary); }

/* =========================================================
   BASE — light reset; opt-in via body class .wb-base
   ========================================================= */
.wb-base {
  font-family: var(--wb-font-body);
  font-size: var(--wb-text-body);
  line-height: var(--wb-line-normal);
  color: var(--wb-fg);
  background: var(--wb-bg);
  -webkit-font-smoothing: antialiased;
}
.wb-base * , .wb-base *::before , .wb-base *::after { box-sizing: border-box; }