/* ============================================================================
   DESIGN SYSTEM · 01 · TOKENS
   ----------------------------------------------------------------------------
   Single source of truth for design decisions.
   All values derive from --brand-color (set per gym in base.html).
   NEVER hardcode hex/rgb in components. Always reference a token.
   ============================================================================ */

:root {
  /* ── Typography stack ─────────────────────────────────────────────────── */
  --ds-font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --ds-font-mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ── Fluid type scale (mobile → desktop, no media queries needed) ─────── */
  --ds-text-2xs: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);   /* 11→12 */
  --ds-text-xs:  clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem); /* 12→13 */
  --ds-text-sm:  clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);  /* 13→14 */
  --ds-text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem);     /* 15→16 */
  --ds-text-lg:  clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);     /* 17→18 */
  --ds-text-xl:  clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);   /* 19→22 */
  --ds-text-2xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);    /* 22→28 */
  --ds-text-3xl: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);       /* 26→36 */
  --ds-text-4xl: clamp(2rem, 1.6rem + 1.8vw, 3rem);            /* 32→48 */
  --ds-text-5xl: clamp(2.5rem, 2rem + 2.4vw, 3.75rem);         /* 40→60 */

  /* ── Tracking (letter-spacing) ────────────────────────────────────────── */
  --ds-tracking-tighter: -0.03em;
  --ds-tracking-tight:   -0.02em;
  --ds-tracking-snug:    -0.01em;
  --ds-tracking-normal:  0;
  --ds-tracking-wide:    0.04em;
  --ds-tracking-wider:   0.08em;

  /* ── Leading (line-height) ────────────────────────────────────────────── */
  --ds-leading-none:   1;
  --ds-leading-tight:  1.15;
  --ds-leading-snug:   1.35;
  --ds-leading-normal: 1.55;
  --ds-leading-relaxed: 1.7;

  /* ── Weight ───────────────────────────────────────────────────────────── */
  --ds-weight-regular: 400;
  --ds-weight-medium:  500;
  --ds-weight-semibold: 600;
  --ds-weight-bold:    700;
  --ds-weight-black:   800;

  /* ── Spacing scale (4px base, restricted set) ─────────────────────────── */
  --ds-space-0:   0;
  --ds-space-1:   0.25rem;  /* 4  */
  --ds-space-2:   0.5rem;   /* 8  */
  --ds-space-3:   0.75rem;  /* 12 */
  --ds-space-4:   1rem;     /* 16 */
  --ds-space-5:   1.5rem;   /* 24 */
  --ds-space-6:   2rem;     /* 32 */
  --ds-space-7:   3rem;     /* 48 */
  --ds-space-8:   4rem;     /* 64 */
  --ds-space-9:   6rem;     /* 96 */

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --ds-radius-xs:  0.375rem;
  --ds-radius-sm:  0.5rem;
  --ds-radius-md:  0.75rem;
  --ds-radius-lg:  1rem;
  --ds-radius-xl:  1.25rem;
  --ds-radius-2xl: 1.5rem;
  --ds-radius-pill: 9999px;

  /* ── Surfaces (neutral palette, slate-based) ──────────────────────────── */
  --ds-surface-app:    #f8fafc;       /* page background */
  --ds-surface-0:      #ffffff;       /* cards, default */
  --ds-surface-1:      #f8fafc;       /* sunken */
  --ds-surface-2:      #f1f5f9;       /* hover row */
  --ds-surface-3:      #e2e8f0;       /* divider */
  --ds-surface-glass:  rgba(255,255,255,0.78);
  --ds-surface-overlay: rgba(15,23,42,0.45);
  --ds-surface-ink:    #0f172a;       /* dark sections (hero, login) */

  /* ── Text colors (modern: avoid pure black) ───────────────────────────── */
  --ds-text-strong:  #0f172a;
  --ds-text-default: #1e293b;
  --ds-text-muted:   #64748b;
  --ds-text-subtle:  #94a3b8;
  --ds-text-inverse: #f8fafc;

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --ds-border-subtle: #f1f5f9;
  --ds-border-default: #e2e8f0;
  --ds-border-strong:  #cbd5e1;
  --ds-border-focus:   color-mix(in srgb, var(--brand-color, #0f172a) 55%, transparent);

  /* ── Brand-derived utility colors (work with ANY brand_color) ─────────── */
  --ds-brand:        var(--brand-color, #0f172a);
  --ds-brand-soft:   color-mix(in srgb, var(--brand-color, #0f172a) 12%, white);
  --ds-brand-softer: color-mix(in srgb, var(--brand-color, #0f172a) 6%,  white);
  --ds-brand-strong: color-mix(in srgb, var(--brand-color, #0f172a) 88%, black);
  --ds-brand-tint:   color-mix(in srgb, var(--brand-color, #0f172a) 10%, transparent);
  --ds-brand-ring:   color-mix(in srgb, var(--brand-color, #0f172a) 35%, transparent);

  /* ── Semantic states (independent of brand) ───────────────────────────── */
  --ds-success: #10b981;
  --ds-success-soft: #ecfdf5;
  --ds-warning: #f59e0b;
  --ds-warning-soft: #fffbeb;
  --ds-danger:  #ef4444;
  --ds-danger-soft: #fef2f2;
  --ds-info:    #3b82f6;
  --ds-info-soft: #eff6ff;

  /* ── Shadows (modern, soft, layered) ──────────────────────────────────── */
  --ds-shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --ds-shadow-sm: 0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.03);
  --ds-shadow-md: 0 4px 8px -2px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.04);
  --ds-shadow-lg: 0 12px 24px -8px rgba(15,23,42,0.08), 0 4px 8px -4px rgba(15,23,42,0.04);
  --ds-shadow-xl: 0 24px 48px -12px rgba(15,23,42,0.12), 0 8px 16px -8px rgba(15,23,42,0.06);
  --ds-shadow-2xl: 0 40px 80px -20px rgba(15,23,42,0.18);
  --ds-shadow-brand: 0 8px 24px -8px color-mix(in srgb, var(--brand-color, #0f172a) 38%, transparent);
  --ds-shadow-focus: 0 0 0 3px var(--ds-brand-ring);

  /* ── Motion (single source — used by motion.css and components) ───────── */
  --ds-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --ds-motion-quick:  120ms;
  --ds-motion-base:   220ms;
  --ds-motion-slow:   360ms;
  --ds-motion-slower: 480ms;

  /* ── Z-index scale ────────────────────────────────────────────────────── */
  --ds-z-base:     1;
  --ds-z-sticky:   40;
  --ds-z-dropdown: 50;
  --ds-z-overlay:  60;
  --ds-z-modal:    70;
  --ds-z-popover:  75;
  --ds-z-toast:    80;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --ds-container-max: 1440px;
  --ds-container-pad: clamp(1rem, 4vw, 2.5rem);
  --ds-page-pad-y:    clamp(1rem, 2.5vw, 2rem);

  /* ── Touch targets (Apple HIG / Material) ─────────────────────────────── */
  --ds-touch-min: 44px;
  --ds-control-h-sm: 32px;
  --ds-control-h-md: 40px;
  --ds-control-h-lg: 48px;
}

/* Honor prefers-reduced-motion globally for any token-driven animation */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-motion-quick:  1ms;
    --ds-motion-base:   1ms;
    --ds-motion-slow:   1ms;
    --ds-motion-slower: 1ms;
  }
}