/**
 * Planner Design Tokens
 * Consumes platform-tokens.css as the single source of truth.
 * Planner-specific variables use --planner-* prefix.
 */

@import url('/design-system/platform-tokens.css');

:root {
  /* ========================================
     MAPPED FROM PLATFORM TOKENS
     No fallbacks needed — platform-tokens.css is imported above
     ======================================== */

  /* Primary Colors — inherited from platform-tokens.css.
     No redefinition needed; --planner-primary, --planner-dark,
     --planner-very-light are set in the @import above. */

  /* Neutral Colors — aliases to platform gray scale (1240+ usages across planner CSS) */
  --planner-gray-50: var(--gray-50);
  --planner-gray-100: var(--gray-100);
  --planner-gray-200: var(--gray-200);
  --planner-gray-300: var(--gray-300);
  --planner-gray-400: var(--gray-400);
  --planner-gray-500: var(--gray-500);
  --planner-gray-600: var(--gray-600);
  --planner-gray-700: var(--gray-700);
  --planner-gray-800: var(--gray-800);
  --planner-gray-900: var(--gray-900);

  /* Background Colors - from platform */
  --planner-bg-warm: var(--bg-page);
  --planner-bg-white: var(--bg-surface);
  --planner-bg-light: var(--bg-muted);

  /* Border & Shadow - from platform */
  --planner-border: var(--gray-200);
  --planner-border-medium: var(--gray-300);
  --planner-shadow-sm: var(--shadow-sm);
  --planner-shadow-md: var(--shadow-md);
  --planner-shadow-lg: var(--shadow-lg);

  /* Border Radius - from platform */
  --planner-radius-sm: var(--radius-sm);
  --planner-radius: var(--radius-lg);
  --planner-radius-lg: var(--radius-xl);
  --planner-radius-xl: var(--radius-2xl);
  --planner-radius-full: var(--radius-full);

  /* Typography - from platform */
  --planner-font-body: var(--font-body);
  --planner-font-display: var(--font-heading);

  /* Transitions - from platform */
  --planner-transition-fast: var(--transition-fast);
  --planner-transition: var(--transition-base);
  --planner-transition-slow: var(--transition-slow);

  /* ========================================
     PLANNER-SPECIFIC TOKENS
     Unique to the planner interface
     ======================================== */

  /* Topbar Gradient (Blue theme for planner) */
  --planner-topbar-bg: var(--planner-gradient);
  --planner-topbar-color: var(--text-inverse);

  /* Activity Type Colors (canonical source — also aliased as --color-* in planner-v2.css) */
  --planner-exercise-color: #2563EB;
  --planner-exercise-light: #D6ECFF;
  --planner-exercise-bg: #D6ECFF;
  --planner-exercise-border: rgba(37, 99, 235, 0.3);

  --planner-icebreaker-color: #10B981;
  --planner-icebreaker-light: #D1FAE5;
  --planner-icebreaker-bg: #D1FAE5;
  --planner-icebreaker-border: rgba(16, 185, 129, 0.3);

  --planner-break-color: var(--gray-500);
  --planner-break-light: var(--gray-100);
  --planner-break-bg: var(--gray-50);
  --planner-break-border: rgba(120, 113, 108, 0.3);

  --planner-custom-color: #9333EA;
  --planner-custom-light: #F3E8FF;
  --planner-custom-bg: #FAF5FF;

  /* Status Colors - from platform tokens */
  --planner-success: var(--color-success);
  --planner-success-bg: var(--color-success-very-light);
  --planner-warning: var(--color-warning);
  --planner-warning-bg: var(--color-warning-very-light);
  --planner-error: var(--color-error);
  --planner-error-bg: var(--color-error-very-light);
  --planner-info: var(--color-info);
  --planner-info-bg: var(--color-info-very-light);

  /* Category Colors (for sidebar) */
  --planner-category-ideation: var(--color-warning);
  --planner-category-strategy: var(--color-info);
  --planner-category-team: var(--phase-reflect);
  --planner-category-design: var(--coach-mode-facilitate);
  --planner-category-feedback: #EC4899; /* pink - no platform match */
  --planner-category-remote: #06B6D4;  /* cyan - no platform match */

  /* Interactive / Accent Color (buttons, hovers, focus rings) */
  --planner-interactive: var(--planner-primary);
  --planner-interactive-dark: var(--planner-dark);
  --planner-interactive-bg: rgba(2, 132, 199, 0.08);
  --planner-interactive-border: rgba(2, 132, 199, 0.3);

  /* Layout Dimensions */
  --planner-header-height: 64px;
  --planner-topbar-height: 56px;
  --planner-sidebar-width: 320px;
  --planner-sidebar-collapsed: 60px;
  --planner-timeline-height: 48px;

  /* Z-Index Scale - mapped from platform tokens */
  --planner-z-base: 1;
  --planner-z-dropdown: var(--z-dropdown);
  --planner-z-sticky: var(--z-sticky);
  --planner-z-modal-backdrop: var(--z-modal-backdrop);
  --planner-z-modal: var(--z-modal);
  --planner-z-toast: var(--z-tooltip);

  /* Grid Pattern (matching Tips design) */
  --planner-grid-color: rgba(44, 36, 22, 0.06);
  --planner-grid-size: 24px;

  /* ========================================
     LEGACY ALIASES
     For backward compatibility with existing code
     ======================================== */

  /* Old variable names -> new names */
  --planner-red: var(--planner-topbar-bg);
  --planner-red-dark: var(--planner-dark);
  --planner-red-light: var(--planner-very-light);
  --planner-green: var(--planner-success);
  --planner-green-light: var(--planner-success-bg);
  --planner-yellow: var(--planner-warning);
  --planner-yellow-light: var(--planner-warning-bg);
  --planner-blue: var(--planner-primary);
  --planner-blue-light: var(--planner-very-light);
  --planner-purple: var(--coach-primary);
  --planner-purple-light: var(--coach-very-light);
  --planner-orange: var(--color-warning);
  --planner-orange-light: var(--color-warning-very-light);

  /* Shadow aliases */
  --planner-shadow: var(--planner-shadow-sm);
}

/* ========================================
   DARK MODE SUPPORT (Future)
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Placeholder for dark mode variables */
  }
}