/* ==========================================================================
   WORKSHOPR DESIGN TOKENS — BRIDGE FILE
   Maps legacy --ws-* tokens to platform-tokens.css (the single source of truth)

   DO NOT add new tokens here. Add them to /design-system/platform-tokens.css
   ========================================================================== */

/* ?v= stamp: bump on every change to the imported file — browsers cache imports for 7 days
   and the entry-file ?v= does NOT invalidate them. See css/planner/planner-new.css header. */
@import url('/design-system/platform-tokens.css?v=20260610');

:root {
  /* ========================================
     COLORS - Brand (mapped to platform tokens)
     ======================================== */
  --ws-color-primary: var(--mainsite-primary);
  --ws-color-primary-dark: var(--mainsite-dark);
  --ws-color-primary-light: var(--mainsite-light);
  --ws-color-primary-hover: #D14545;

  --ws-color-navy: var(--color-navy);
  --ws-color-navy-light: var(--color-navy-light);

  --ws-color-accent: #FFB800;
  --ws-color-accent-light: #FFF3D0;

  --ws-color-blue: var(--planner-primary);
  --ws-color-blue-light: var(--planner-very-light);

  --ws-color-green: var(--phase-reflect);
  --ws-color-green-light: var(--phase-reflect-very-light);

  --ws-color-purple: var(--coach-primary);
  --ws-color-purple-light: var(--coach-very-light);

  /* ========================================
     COLORS - Property Theming
     ======================================== */
  --ws-property-color: var(--mainsite-primary);
  --ws-property-color-dark: var(--mainsite-dark);
  --ws-property-color-light: var(--mainsite-light);

  /* ========================================
     COLORS - Semantic (mapped to platform tokens)
     ======================================== */
  --ws-color-success: var(--color-success);
  --ws-color-success-light: var(--color-success-very-light);
  --ws-color-success-dark: var(--color-success-dark);
  --ws-color-warning: var(--color-warning);
  --ws-color-warning-light: var(--color-warning-very-light);
  --ws-color-warning-dark: var(--color-warning-dark);
  --ws-color-error: var(--color-error);
  --ws-color-error-light: var(--color-error-very-light);
  --ws-color-error-dark: var(--color-error-dark);
  --ws-color-info: var(--color-info);
  --ws-color-info-light: var(--color-info-very-light);

  /* ========================================
     COLORS - Gray Scale (warm stone, from platform)
     ======================================== */
  --ws-gray-50: var(--gray-50);
  --ws-gray-100: var(--gray-100);
  --ws-gray-200: var(--gray-200);
  --ws-gray-300: var(--gray-300);
  --ws-gray-400: var(--gray-400);
  --ws-gray-500: var(--gray-500);
  --ws-gray-600: var(--gray-600);
  --ws-gray-700: var(--gray-700);
  --ws-gray-800: var(--gray-800);
  --ws-gray-900: var(--gray-900);

  /* ========================================
     COLORS - Surfaces (warm palette)
     ======================================== */
  --ws-bg-warm: var(--bg-page);
  --ws-bg-cool: var(--bg-subtle);
  --ws-bg-light: var(--bg-muted);
  --ws-bg-white: var(--bg-surface);
  --ws-bg-dark: #1a1a2e;
  --ws-bg-page: var(--bg-page);

  /* ========================================
     COLORS - Text (warm ink, from platform)
     ======================================== */
  --ws-text-primary: var(--color-ink);
  --ws-text-secondary: var(--color-ink-secondary);
  --ws-text-muted: var(--color-ink-muted);
  --ws-text-faint: var(--color-ink-faint);
  --ws-text-inverse: var(--text-inverse);

  /* ========================================
     COLORS - Borders (warm)
     ======================================== */
  --ws-border-light: var(--gray-200);
  --ws-border-medium: var(--gray-300);
  --ws-border-strong: rgba(44, 36, 22, 0.12);

  /* ========================================
     COLORS - Cards
     ======================================== */
  --ws-card-red: var(--mainsite-very-light);
  --ws-card-green: var(--color-success-very-light);
  --ws-card-blue: var(--color-info-very-light);
  --ws-card-purple: var(--coach-very-light);
  --ws-card-yellow: var(--color-warning-very-light);

  /* ========================================
     TYPOGRAPHY (mapped to platform tokens)
     ======================================== */
  --ws-font-display: var(--font-heading);
  --ws-font-body: var(--font-body);
  --ws-font-ui: var(--font-body);
  --ws-font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* Font Sizes */
  --ws-text-xs: var(--text-caption);
  --ws-text-sm: var(--text-small);
  --ws-text-base: var(--text-body);
  --ws-text-lg: var(--text-h4);
  --ws-text-xl: var(--text-h3);
  --ws-text-2xl: var(--text-h2);
  --ws-text-3xl: 1.875rem;
  --ws-text-4xl: 2.25rem;
  --ws-text-5xl: 3rem;

  /* Font Weights */
  --ws-font-normal: var(--font-normal);
  --ws-font-medium: var(--font-medium);
  --ws-font-semibold: var(--font-semibold);
  --ws-font-bold: var(--font-bold);

  /* Line Heights */
  --ws-leading-tight: var(--leading-tight);
  --ws-leading-normal: var(--leading-normal);
  --ws-leading-relaxed: var(--leading-relaxed);

  /* ========================================
     SPACING (mapped to platform 4px base)
     ======================================== */
  --ws-space-0: 0;
  --ws-space-px: 1px;
  --ws-space-0-5: 2px;
  --ws-space-1: var(--space-1);
  --ws-space-2: var(--space-2);
  --ws-space-3: var(--space-3);
  --ws-space-4: var(--space-4);
  --ws-space-5: var(--space-5);
  --ws-space-6: var(--space-6);
  --ws-space-7: 28px;
  --ws-space-8: var(--space-8);
  --ws-space-9: 36px;
  --ws-space-10: var(--space-10);
  --ws-space-12: var(--space-12);
  --ws-space-14: 56px;
  --ws-space-16: var(--space-16);
  --ws-space-20: 80px;
  --ws-space-24: 96px;

  /* ========================================
     BORDER RADIUS (mapped to platform scale)
     ======================================== */
  --ws-radius-none: 0;
  --ws-radius-xs: var(--radius-sm);
  --ws-radius-sm: var(--radius-md);
  --ws-radius: var(--radius-lg);
  --ws-radius-md: var(--radius-xl);
  --ws-radius-lg: var(--radius-2xl);
  --ws-radius-xl: 24px;
  --ws-radius-2xl: 32px;
  --ws-radius-full: var(--radius-full);

  /* ========================================
     SHADOWS (neutral black, from platform)
     ======================================== */
  --ws-shadow-xs: var(--shadow-xs);
  --ws-shadow-sm: var(--shadow-sm);
  --ws-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  --ws-shadow-md: var(--shadow-md);
  --ws-shadow-lg: var(--shadow-lg);
  --ws-shadow-xl: var(--shadow-xl);
  --ws-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.20);
  --ws-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --ws-shadow-focus: 0 0 0 3px rgba(229, 77, 77, 0.15);

  /* ========================================
     TRANSITIONS (mapped to platform)
     ======================================== */
  --ws-transition-fast: var(--transition-fast);
  --ws-transition: var(--transition-base);
  --ws-transition-slow: var(--transition-slow);
  --ws-transition-slower: 400ms ease;
  --ws-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ws-ease-out: cubic-bezier(0, 0, 0.2, 1);
  /* Bounce easing removed — violates design principle "No bouncy/spring animations" */

  /* ========================================
     Z-INDEX SCALE (mapped to platform)
     ======================================== */
  --ws-z-base: 0;
  --ws-z-dropdown: var(--z-dropdown);
  --ws-z-sticky: var(--z-sticky);
  --ws-z-fixed: 500;
  --ws-z-header: 900;
  --ws-z-modal-backdrop: var(--z-modal-backdrop);
  --ws-z-modal: var(--z-modal);
  --ws-z-popover: 1500;
  --ws-z-tooltip: var(--z-tooltip);
  --ws-z-toast: 3000;

  /* ========================================
     GRADIENTS
     ======================================== */
  --ws-gradient-primary: var(--mainsite-gradient);
  --ws-gradient-hero: linear-gradient(180deg, var(--bg-page) 0%, #FFF5EE 100%);
  --ws-gradient-cta: linear-gradient(135deg, #1a1a2e 0%, var(--color-navy-light) 100%);
  --ws-gradient-card: linear-gradient(to bottom, var(--gray-50), var(--gray-100));

  /* ========================================
     CONTAINER WIDTHS
     ======================================== */
  --ws-container-xs: 320px;
  --ws-container-sm: 640px;
  --ws-container-md: 768px;
  --ws-container-lg: 1024px;
  --ws-container-xl: 1280px;
  --ws-container-2xl: 1440px;
}

/* ==========================================================================
   LEGACY ALIASES (Backward Compatibility)
   These map oldest variable names → --ws-* tokens → platform tokens
   ========================================================================== */
:root {
  /* styles.css compatibility */
  --primary-red: var(--ws-color-primary);
  --primary-red-dark: var(--ws-color-primary-dark);
  --primary-red-light: var(--ws-color-primary-light);
  --primary-red-hover: var(--ws-color-primary-hover);
  /* Red Unification (D1): the legacy navy alias now resolves to warm ink so
     pre-unification headings/badges stop rendering cold blue on warm cream. */
  --primary-navy: var(--color-ink, #2C2416);
  --primary-navy-light: var(--gray-100, #F5F5F4);
  --accent-yellow: var(--ws-color-accent);
  --accent-yellow-light: var(--ws-color-accent-light);
  --primary-blue: var(--ws-color-blue);
  --primary-blue-light: var(--ws-color-blue-light);
  --primary-green: var(--ws-color-green);
  --primary-green-light: var(--ws-color-green-light);
  --primary-purple: var(--ws-color-purple);
  --primary-purple-light: var(--ws-color-purple-light);

  --color-success: var(--ws-color-success);
  --color-success-light: var(--ws-color-success-light);
  --color-warning: var(--ws-color-warning);
  --color-warning-light: var(--ws-color-warning-light);
  --color-error: var(--ws-color-error);
  --color-error-light: var(--ws-color-error-light);
  --color-info: var(--ws-color-info);
  --color-info-light: var(--ws-color-info-light);

  --text-dark: var(--ws-text-primary);
  --text-body: var(--ws-text-secondary);
  --text-gray: var(--ws-text-muted);
  --text-muted: var(--ws-text-faint);
  --text-light: var(--ws-text-inverse);

  --bg-warm: var(--ws-bg-warm);
  --bg-cool: var(--ws-bg-cool);
  --bg-light: var(--ws-bg-light);
  --bg-white: var(--ws-bg-white);
  --bg-dark: var(--ws-bg-dark);
  --bg-page: var(--ws-bg-page);

  --border-light: var(--ws-border-light);
  --border-medium: var(--ws-border-medium);

  --card-red: var(--ws-card-red);
  --card-green: var(--ws-card-green);
  --card-blue: var(--ws-card-blue);
  --card-purple: var(--ws-card-purple);

  --font-display: var(--ws-font-display);
  --font-body: var(--ws-font-body);

  --shadow-sm: var(--ws-shadow-sm);
  --shadow: var(--ws-shadow);
  --shadow-md: var(--ws-shadow-md);
  --shadow-hover: var(--ws-shadow-lg);
  --shadow-lg: var(--ws-shadow-xl);

  --radius-sm: var(--ws-radius-sm);
  --radius: var(--ws-radius);
  --radius-md: var(--ws-radius-md);
  --radius-lg: var(--ws-radius-lg);

  --radius-xl: var(--ws-radius-xl);
  --radius-full: var(--ws-radius-full);

  --transition: all var(--ws-transition);
  --transition-fast: all var(--ws-transition-fast);
  --transition-smooth: all var(--ws-transition-slow);
  --transition-bounce: all 0.4s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));

  /* Gradients */
  --gradient-primary: var(--ws-gradient-primary);
  --gradient-hero: var(--ws-gradient-hero);
  --gradient-cta: var(--ws-gradient-cta);

  /* Badge Colors - Category accent colors
     Note: These use exact hex to preserve contrast ratios on card backgrounds.
     Red/purple already match platform tokens; green/blue/yellow are unique badge tints. */
  --badge-red: var(--mainsite-primary);
  --badge-green: #22A756;
  --badge-blue: #3B7DD8;
  --badge-purple: var(--coach-primary);
  --badge-yellow: #EAB308;

  /* Font Size Scale (main site) */
  --text-xs: var(--ws-text-xs);
  --text-sm: var(--ws-text-sm);
  --text-base: var(--ws-text-base);
  --text-lg: var(--ws-text-lg);
  --text-xl: var(--ws-text-xl);
  --text-2xl: var(--ws-text-2xl);
  --text-3xl: var(--ws-text-3xl);
  --text-4xl: var(--ws-text-4xl);

  /* Spacing Scale (from platform tokens) */
  --space-20: 80px;

  /* Z-Index (extensions beyond platform) */
  --z-fixed: 500;
  --z-popover: 1500;
  --z-toast: 3000;

  /* unified-header.css compatibility */
  --uh-color-library: var(--mainsite-primary);
  --uh-color-coach: var(--coach-primary);
  --uh-color-planner: var(--planner-primary);
  /* Red Unification (D1): uh navy → warm ink, same as --primary-navy above. */
  --uh-color-navy: var(--color-ink, #2C2416);
  --uh-color-gray-50: var(--gray-50);
  --uh-color-gray-100: var(--gray-100);
  --uh-color-gray-200: var(--gray-200);
  --uh-color-gray-300: var(--gray-300);
  --uh-color-gray-400: var(--gray-400);
  --uh-color-gray-500: var(--gray-500);
  --uh-color-gray-600: var(--gray-600);
  --uh-color-gray-700: var(--gray-700);
  --uh-property-color: var(--ws-property-color);
  --uh-shadow-sm: var(--ws-shadow-sm);
  --uh-shadow-md: var(--ws-shadow-md);
  --uh-shadow-lg: var(--ws-shadow-lg);
  --uh-font-brand: var(--font-heading);
  --uh-font-ui: var(--font-body);
  --uh-transition-fast: var(--ws-transition-fast);
  --uh-transition: var(--ws-transition);

  /* survey modal accent (indigo-purple gradient) */
  --survey-accent: #667eea;
  --survey-accent-dark: #5a67d8;
  --survey-accent-alt: #764ba2;
  --survey-accent-alt-dark: #6b46c1;
  --survey-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --survey-gradient-hover: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);

  /* detail-redesign.css compatibility */
  --detail-accent: var(--ws-color-primary);
  --detail-bg: var(--ws-bg-warm);
  --detail-text-primary: var(--ws-text-primary);
  --detail-text-secondary: var(--ws-text-secondary);
  --detail-border: var(--ws-border-light);
  --detail-shadow-xs: var(--ws-shadow-xs);
  --detail-shadow-sm: var(--ws-shadow-sm);
  --detail-radius-sm: var(--ws-radius-sm);
  --detail-radius: var(--ws-radius);
  --detail-radius-md: var(--ws-radius-md);
  --detail-transition-fast: var(--ws-transition-fast);

  /* detail-sidebar.css compatibility */
  --color-primary: var(--ws-color-primary);
  --color-background: var(--ws-bg-warm);
  --color-text-primary: var(--ws-text-primary);

  /* listing-redesign.css compatibility */
  --listing-accent: var(--ws-color-primary);
  --listing-bg: var(--ws-bg-warm);
}