/* ═══════════════════════════════════════════════════════════════════════════════
   PATHWAY — Design System Tokens (Single Source of Truth)
   ═════════════════════════════════════════════════════════════════════════════════

   This file consolidates ALL design decisions across the platform:
   - panel-v2.html (coach panel)
   - multicoach.html (owner dashboard)
   - client portals

   Import with: <link rel="stylesheet" href="pw-design-tokens.css?v=1">

   Token naming:
   --pw-{category}-{scale/variant}

   Categories: color, typo (typography), space, radius, shadow, ease (easing), dur (duration)

   This is maintained by Design Phase — do NOT edit tokens without updating the design spec.
*/

:root {
  /* ════════════════════════════════════════════════════════════════════════════
     BRAND & COLOR SYSTEM
     ════════════════════════════════════════════════════════════════════════════ */

  /* PRIMARY BRAND — Pathway Green */
  --pw-brand-base: #2D6A4F;
  --pw-brand-dark: #1B4332;
  --pw-brand-hover: color-mix(in srgb, var(--pw-brand-base), #000 15%);
  --pw-brand-light: color-mix(in srgb, var(--pw-brand-base) 12%, #fff);
  --pw-brand-soft: color-mix(in srgb, var(--pw-brand-base) 8%, #fff);
  --pw-brand-100: color-mix(in srgb, var(--pw-brand-base) 14%, #fff);
  --pw-brand-50: var(--pw-brand-soft);
  --pw-brand-border: color-mix(in srgb, var(--pw-brand-base) 24%, #fff);

  /* ACCENT (Brand primary, used in interactive elements) */
  --pw-accent: var(--pw-brand-base);
  --pw-accent-soft: #52B788;
  --pw-accent-dark: var(--pw-brand-dark);
  --pw-accent-mid: #ACD4BB;
  --pw-accent-light: #E8F5EE;

  /* LEGACY ALIASES (backwards compatibility with panel-v2) */
  --accent: var(--pw-brand-base);
  --accent-soft: var(--pw-accent-soft);
  --accent-dark: var(--pw-brand-dark);
  --accent-mid: var(--pw-accent-mid);
  --accent-light: var(--pw-accent-light);
  --brand: var(--pw-brand-base);
  --brand-hover: var(--pw-brand-hover);
  --brand-soft: var(--pw-brand-soft);
  --brand-50: var(--pw-brand-50);
  --brand-100: var(--pw-brand-100);
  --brand-border: var(--pw-brand-border);
  --brand-icon: var(--pw-brand-base);

  /* SEMANTIC COLORS */
  --pw-bosque: var(--pw-brand-base);
  --pw-bosque-dark: var(--pw-brand-dark);
  --pw-sendero: #52B788;
  --pw-amanecer: #E9C46A;
  --pw-success: var(--pw-sendero);
  --pw-success-bg: rgba(82, 183, 136, 0.14);
  --pw-warning: var(--pw-amanecer);
  --pw-warning-bg: rgba(233, 196, 106, 0.18);
  --pw-danger: #C0756E;
  --pw-danger-bg: rgba(192, 117, 110, 0.12);
  --pw-info: var(--pw-bosque);
  --pw-info-bg: rgba(82, 183, 136, 0.08);

  /* MEDALS & CURRENCY */
  --pw-bronce: #B97A3D;
  --pw-dinero: #A8AFB5;
  --pw-oro: #D4A24C;

  /* NEUTRAL & GRAYSCALE */
  --pw-carbon: #152018;
  --pw-text: var(--pw-carbon);
  --pw-text-soft: #49524D;
  --pw-text-muted: #7B827D;
  --pw-text-on-dark: #FFFFFF;
  --pw-text-on-dark-soft: rgba(255, 255, 255, 0.78);

  /* BACKGROUNDS */
  --pw-bg: #FBFAF8;
  --pw-bg-card: #FFFFFF;
  --pw-bg-soft: #F8F5EF;
  --pw-bg-inverse: var(--pw-bosque-dark);
  --pw-niebla: #F6F4EF;
  --pw-niebla-2: #F8F5EF;
  --pw-niebla-3: #EFE9DD;

  /* BORDERS */
  --pw-border: #ECE8DF;
  --pw-border-strong: #DCD6C9;
  --pw-border-input: #E5DFD3;

  /* GRADIENTS */
  --pw-grad-niebla: linear-gradient(135deg, #FCFDFC 0%, #F7F8F5 50%, #F1F4F1 100%);

  /* SIDEBAR */
  --pw-side-top: #2F3640;
  --pw-side-bot: #20252B;
  --pw-side-bg: #FFFFFF;

  /* ICON COLOR (always neutral, never branded) */
  --pw-icon: #232323;

  /* ════════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY SYSTEM
     ════════════════════════════════════════════════════════════════════════════ */

  /* FONT FAMILIES */
  --pw-serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --pw-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pw-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Menlo", monospace;

  /* FONT SIZES (Fluid scaling for responsive) */
  --pw-fs-display: clamp(34px, 5.5vw, 58px);
  --pw-fs-h1: clamp(28px, 3.6vw, 40px);
  --pw-fs-h2: clamp(24px, 3vw, 32px);
  --pw-fs-h3: 19px;
  --pw-fs-h4: 16px;
  --pw-fs-body-lg: 16px;
  --pw-fs-body: 15px;
  --pw-fs-small: 13px;
  --pw-fs-micro: 11px;

  /* LINE HEIGHTS */
  --pw-lh-tight: 1.1;
  --pw-lh-snug: 1.2;
  --pw-lh-body: 1.55;
  --pw-lh-loose: 1.65;

  /* LETTER SPACING */
  --pw-ls-display: -2px;
  --pw-ls-tight: -1.2px;
  --pw-ls-h3: -0.4px;
  --pw-ls-eyebrow: 1.2px;

  /* ════════════════════════════════════════════════════════════════════════════
     SPACING SYSTEM (8px base grid)
     ════════════════════════════════════════════════════════════════════════════ */

  --pw-space-xs: 4px;
  --pw-space-sm: 8px;
  --pw-space-md: 12px;
  --pw-space-lg: 16px;
  --pw-space-xl: 24px;
  --pw-space-2xl: 32px;
  --pw-space-3xl: 48px;

  /* PADDING & GAPS (canonical values used throughout) */
  --pw-pad-card: 20px;
  --pw-pad-section: 18px;
  --pw-pad-sidebar: 16px 12px;
  --pw-gap-cards: 14px;
  --pw-gap-section: 13px;

  /* ════════════════════════════════════════════════════════════════════════════
     LAYOUT DIMENSIONS (CRITICAL — do not change without design review)
     ════════════════════════════════════════════════════════════════════════════ */

  /* SIDEBAR */
  --pw-sidebar-width: 248px;
  --pw-sidebar-width-collapsed: 80px;

  /* CONTENT */
  --pw-container-max: 1200px;
  --pw-container-narrow-max: 760px;

  /* BREAKPOINTS */
  --pw-break-mobile: 760px;
  --pw-break-tablet: 900px;
  --pw-break-wide: 1024px;
  --pw-break-xl: 1280px;

  /* ════════════════════════════════════════════════════════════════════════════
     BORDER RADIUS (Comprehensive scale)
     ════════════════════════════════════════════════════════════════════════════ */

  --pw-radius-xs: 6px;
  --pw-radius-sm: 8px;
  --pw-radius-md: 10px;
  --pw-radius-lg: 12px;
  --pw-radius-xl: 14px;
  --pw-radius-2xl: 16px;
  --pw-radius-3xl: 20px;
  --pw-radius-pill: 100px;
  --pw-radius-circle: 50%;

  /* COMPONENT SPECIFIC RADIUS */
  --pw-radius-card: var(--pw-radius-2xl);
  --pw-radius-input: var(--pw-radius-md);
  --pw-radius-button: var(--pw-radius-lg);
  --pw-radius-badge: var(--pw-radius-pill);
  --pw-radius-avatar: var(--pw-radius-circle);

  /* ════════════════════════════════════════════════════════════════════════════
     COMPONENT DIMENSIONS
     ════════════════════════════════════════════════════════════════════════════ */

  /* BUTTONS */
  --pw-btn-height-lg: 42px;
  --pw-btn-height-md: 40px;
  --pw-btn-height-sm: 36px;
  --pw-btn-pad-x-lg: 18px;
  --pw-btn-pad-x-md: 16px;
  --pw-btn-pad-x-sm: 12px;

  /* AVATARS */
  --pw-avatar-lg: 80px;
  --pw-avatar-md: 36px;
  --pw-avatar-sm: 34px;
  --pw-avatar-xs: 30px;
  --pw-avatar-badge-lg: 34px;
  --pw-avatar-badge-md: 29px;

  /* ICONS */
  --pw-icon-size-lg: 24px;
  --pw-icon-size-md: 20px;
  --pw-icon-size-sm: 16px;
  --pw-icon-size-xs: 12px;
  --pw-icon-stroke: 2px;

  /* INPUT FIELDS */
  --pw-input-height: 40px;
  --pw-input-pad-x: 16px;
  --pw-input-pad-y: 8px;

  /* ════════════════════════════════════════════════════════════════════════════
     SHADOWS (Elevation system)
     ════════════════════════════════════════════════════════════════════════════ */

  --pw-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --pw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --pw-shadow-md: 0 10px 24px rgba(16, 24, 40, 0.08);
  --pw-shadow-lg: 0 10px 24px rgba(16, 24, 40, 0.08);
  --pw-shadow-xl: 0 24px 80px rgba(16, 24, 40, 0.18);
  --pw-shadow-btn: 0 4px 10px rgba(0, 0, 0, 0.08);
  --pw-shadow-modal: 0 22px 60px rgba(0, 0, 0, 0.55);

  /* ════════════════════════════════════════════════════════════════════════════
     FOCUS & INTERACTION
     ════════════════════════════════════════════════════════════════════════════ */

  --pw-focus-ring: 0 0 0 3px rgba(82, 183, 136, 0.25);

  /* ════════════════════════════════════════════════════════════════════════════
     ANIMATION & TIMING (Motion design)
     ════════════════════════════════════════════════════════════════════════════ */

  /* EASING */
  --pw-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* DURATION */
  --pw-dur-fast: 0.15s;
  --pw-dur-base: 0.2s;
  --pw-dur-slow: 0.5s;

  /* ════════════════════════════════════════════════════════════════════════════
     Z-INDEX STACK (Layering hierarchy)
     ════════════════════════════════════════════════════════════════════════════ */

  --pw-z-dropdown: 50;
  --pw-z-sticky: 20;
  --pw-z-fab: 80;
  --pw-z-modal: 100;
  --pw-z-toast: 120;
  --pw-z-notification: 90;

  /* ════════════════════════════════════════════════════════════════════════════
     LEGACY ALIASES (Backwards compatibility)
     ════════════════════════════════════════════════════════════════════════════ */

  --bosque: var(--pw-bosque);
  --bosque-d: var(--pw-bosque-dark);
  --sendero: var(--pw-sendero);
  --amanecer: var(--pw-amanecer);
  --carbon: var(--pw-carbon);
  --bg: var(--pw-bg);
  --card: var(--pw-bg-card);
  --soft: var(--pw-text-soft);
  --muted: var(--pw-text-muted);
  --side: var(--pw-side-bg);
  --border: var(--pw-border);
  --border-s: var(--pw-border-strong);
  --border-strong: var(--pw-border-strong);
  --divider: var(--pw-niebla-3);
  --verdeclaro: var(--pw-brand-light);
  --danger: var(--pw-danger);
  --ok: var(--pw-sendero);
  --ser: var(--pw-serif);
  --sans: var(--pw-sans);
  --sh: var(--pw-shadow-xs);
  --pw-side-top: #2F3640;
  --pw-side-bot: #20252B;
}

/* REDUCED MOTION (Accessibility) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pw-dur-fast: 0s;
    --pw-dur-base: 0s;
    --pw-dur-slow: 0s;
  }
}