/**
 * WORKSHOPR PLATFORM DESIGN TOKENS
 * Single source of truth for all app colors
 *
 * Architecture: LEARN → PLAN → FACILITATE → REFLECT
 *
 * Import this file in any app:
 * @import '/design-system/platform-tokens.css';
 */

:root {

  /* ============================================
     PHASE: LEARN (Red)
     "Get excited, dive in"
     ============================================ */
  --phase-learn: #E54D4D;
  --phase-learn-dark: #C73E3E;
  --phase-learn-light: #FEE2E2;
  --phase-learn-very-light: #FEF2F2;


  /* ============================================
     APP: WORKSHOPR.IO (Main Site)
     Phase: Learn
     Brand red - the anchor color
     ============================================ */
  --mainsite-primary: #E54D4D;
  --mainsite-dark: #C73E3E;
  --mainsite-light: #FEE2E2;
  --mainsite-very-light: #FEF2F2;
  --mainsite-gradient: linear-gradient(135deg, #E54D4D 0%, #C73E3E 100%);
  --mainsite-shadow: 0 4px 14px rgba(229, 77, 77, 0.25);


  /* ============================================
     APP: WORKSHOPR.IO TIPS
     Phase: Learn
     Coral red - lighter, approachable
     ============================================ */
  --tips-primary: #F87171;
  --tips-dark: #EF4444;
  --tips-light: #FECACA;
  --tips-very-light: #FEE2E2;
  --tips-gradient: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
  --tips-shadow: 0 4px 14px rgba(248, 113, 113, 0.25);

  /* Tips Category Colors (6 Coral Tints) */
  --tips-cat-1: #991B1B;  /* Fundamentals */
  --tips-cat-2: #B91C1C;  /* Engagement */
  --tips-cat-3: #DC2626;  /* Facilitation */
  --tips-cat-4: #EF4444;  /* Difficult Moments */
  --tips-cat-5: #F87171;  /* Activities */
  --tips-cat-6: #FCA5A5;  /* Reflection */


  /* ============================================
     APP: WORKSHOPR.IO PODCASTS
     Phase: Learn
     Crimson red - deeper, richer
     ============================================ */
  --podcasts-primary: #BE123C;
  --podcasts-dark: #9F1239;
  --podcasts-light: #FECDD3;
  --podcasts-very-light: #FFE4E6;
  --podcasts-gradient: linear-gradient(135deg, #BE123C 0%, #9F1239 100%);
  --podcasts-shadow: 0 4px 14px rgba(190, 18, 60, 0.25);

  /* Podcast Platform Brand Colors */
  --podcasts-spotify: #1DB954;
  --podcasts-apple: #FC3C44;
  --podcasts-amazon: #FF9900;
  --podcasts-youtube: #FF0000;


  /* ============================================
     PHASE: PLAN (Sky Blue)
     "Focus, structure your thoughts"
     ============================================ */
  --phase-plan: #0284C7;
  --phase-plan-dark: #075985;
  --phase-plan-light: #E0F2FE;
  --phase-plan-very-light: #F0F9FF;


  /* ============================================
     APP: WORKSHOPR.IO PLANNER
     Phase: Plan
     Cold sky blue - focused creation
     ============================================ */
  --planner-primary: #0284C7;
  --planner-dark: #075985;
  --planner-light: #BAE6FD;
  --planner-very-light: #E0F2FE;
  --planner-accent: #F0F9FF;
  --planner-gradient: linear-gradient(135deg, #0284C7 0%, #075985 100%);
  --planner-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);


  /* ============================================
     PHASE: FACILITATE (Purple)
     "Trust yourself, guide others"
     ============================================ */
  --phase-facilitate: #7C4DFF;
  --phase-facilitate-dark: #6D28D9;
  --phase-facilitate-light: #DDD6FE;
  --phase-facilitate-very-light: #EDE9FE;


  /* ============================================
     APP: WORKSHOPR.IO COACH
     Phase: Facilitate
     Purple with 4 mode tints
     ============================================ */
  --coach-primary: #7C4DFF;
  --coach-dark: #6D28D9;
  --coach-light: #DDD6FE;
  --coach-very-light: #EDE9FE;
  --coach-gradient: linear-gradient(135deg, #7C4DFF 0%, #6D28D9 100%);
  --coach-shadow: 0 4px 14px rgba(124, 77, 255, 0.25);

  /* Coach Mode Colors (4 Purple Tints) */
  --coach-mode-prep: #A78BFA;       /* Prep - lightest, planning */
  --coach-mode-facilitate: #8B5CF6; /* Facilitate - active */
  --coach-mode-synthesize: #7C3AED; /* Synthesize - processing */
  --coach-mode-debrief: #6D28D9;    /* Debrief - deepest reflection */

  /* Shared Coach UI Colors */
  --coach-bg: #FFFBF8;
  --coach-surface: #FFFFFF;
  --coach-border: #E8ECF1;


  /* ============================================
     APP: WORKSHOPR.IO INTERVENTION
     Phase: Facilitate
     Purple with 6 category tints
     ============================================ */
  --intervention-primary: #7C4DFF;
  --intervention-dark: #5B21B6;
  --intervention-light: #DDD6FE;
  --intervention-very-light: #EDE9FE;
  --intervention-gradient: linear-gradient(135deg, #7C4DFF 0%, #5B21B6 100%);
  --intervention-shadow: 0 4px 14px rgba(124, 77, 255, 0.25);

  /* Intervention Category Colors (6 Purple Tints) */
  --intervention-cat-1: #4C1D95;  /* Energy & Engagement - darkest/urgent */
  --intervention-cat-2: #5B21B6;  /* Conflict & Tension */
  --intervention-cat-3: #6D28D9;  /* Participation */
  --intervention-cat-4: #7C3AED;  /* Time & Pacing */
  --intervention-cat-5: #8B5CF6;  /* Focus & Clarity */
  --intervention-cat-6: #A78BFA;  /* Connection & Trust - lightest/soft */


  /* ============================================
     PHASE: REFLECT (Emerald)
     "You're growing, keep going"
     ============================================ */
  --phase-reflect: #10B981;
  --phase-reflect-dark: #059669;
  --phase-reflect-light: #A7F3D0;
  --phase-reflect-very-light: #D1FAE5;


  /* ============================================
     APP: WORKSHOPR.IO FACILITATOR'S DNA
     Phase: Reflect
     Light emerald with 5 category tints
     ============================================ */
  --dna-primary: #34D399;
  --dna-dark: #10B981;
  --dna-light: #6EE7B7;
  --dna-very-light: #A7F3D0;
  --dna-gradient: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  --dna-shadow: 0 4px 14px rgba(52, 211, 153, 0.25);

  /* DNA Category Colors (5 Emerald Tints) */
  --dna-cat-1: #047857;  /* Strengths - deepest */
  --dna-cat-2: #059669;  /* Growth Areas */
  --dna-cat-3: #10B981;  /* Style */
  --dna-cat-4: #34D399;  /* History */
  --dna-cat-5: #6EE7B7;  /* Goals - lightest */


  /* ============================================
     APP: WORKSHOPR.IO TRAINING
     Phase: Reflect
     Base emerald - structured learning
     ============================================ */
  --training-primary: #10B981;
  --training-dark: #059669;
  --training-light: #A7F3D0;
  --training-very-light: #D1FAE5;
  --training-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --training-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);


  /* ============================================
     SHARED: SEMANTIC COLORS
     ============================================ */
  --color-success: #22C55E;
  --color-success-dark: #16A34A;
  --color-success-light: #BBF7D0;
  --color-success-very-light: #DCFCE7;

  --color-warning: #F59E0B;
  --color-warning-dark: #D97706;
  --color-warning-light: #FDE68A;
  --color-warning-very-light: #FEF3C7;

  --color-error: #EF4444;
  --color-error-dark: #DC2626;
  --color-error-light: #FECACA;
  --color-error-very-light: #FEE2E2;

  --color-info: #3B82F6;
  --color-info-dark: #2563EB;
  --color-info-light: #BFDBFE;
  --color-info-very-light: #DBEAFE;


  /* ============================================
     SHARED: NEUTRAL PALETTE (Warm)
     ============================================ */

  /* Ink - Warm near-black */
  --color-ink: #2C2416;
  --color-ink-secondary: #5C5242;
  --color-ink-muted: #78716C;
  --color-ink-faint: #A8A29E;

  /* Backgrounds */
  --bg-page: #FEF7F1;
  --bg-page-alt: #FFFBF8;
  --bg-surface: #FFFFFF;
  --bg-muted: #F5F5F4;
  --bg-subtle: #FAFAF9;

  /* Gray Scale */
  --gray-50: #FAFAF9;
  --gray-100: #F5F5F4;
  --gray-200: #E7E5E4;
  --gray-300: #D6D3D1;
  --gray-400: #A8A29E;
  --gray-500: #78716C;
  --gray-600: #57534E;
  --gray-700: #44403C;
  --gray-800: #292524;
  --gray-900: #1C1917;

  /* Navy (Headers, Dark UI) */
  --color-navy: #1A2744;
  --color-navy-light: #2E3D5C;


  /* ============================================
     SHARED: TYPOGRAPHY - Font Families
     ============================================ */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;


  /* ============================================
     SHARED: TYPOGRAPHY - Type Scale
     H1-H3: Fraunces (heading)
     H4, Text: Inter (body)
     ============================================ */

  /* Headings - Fraunces */
  --text-display: 2.875rem; /* 46px - Hero/display text */

  /*
   * DISPLAY TEXT PATTERN:
   * - All text: bold (--font-bold)
   * - First part: --text-default color
   * - Second part: italic, --phase-learn-dark color, 8px --phase-learn-light underline (flush)
   *
   * Example markup:
   * <h1 class="display-text">
   *   Transform Your <em>Facilitation</em>
   * </h1>
   */
  --text-h1: 2rem;         /* 32px */
  --text-h2: 1.5rem;       /* 24px */
  --text-h3: 1.25rem;      /* 20px */

  /* UI Text - Inter */
  --text-h4: 1.125rem;     /* 18px */
  --text-body: 1rem;       /* 16px */
  --text-ui: 0.9375rem;    /* 15px */
  --text-small: 0.875rem;  /* 14px */
  --text-meta: 0.8125rem;  /* 13px */
  --text-caption: 0.75rem; /* 12px */
  --text-micro: 0.6875rem; /* 11px */
  --text-nano: 0.625rem;   /* 10px */


  /* ============================================
     SHARED: TYPOGRAPHY - Font Weights
     ============================================ */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;


  /* ============================================
     SHARED: TYPOGRAPHY - Line Heights
     ============================================ */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;


  /* ============================================
     SHARED: TYPOGRAPHY - Letter Spacing
     ============================================ */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;


  /* ============================================
     SHARED: TYPOGRAPHY - Text Colors
     ============================================ */
  --text-dark: var(--color-ink);
  --text-default: var(--color-ink-secondary);
  --text-muted: var(--color-ink-muted);
  --text-faint: var(--color-ink-faint);
  --text-inverse: #FFFFFF;


  /* ============================================
     SHARED: SHADOWS
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10);


  /* ============================================
     SHARED: BORDER RADIUS
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;


  /* ============================================
     SHARED: SPACING (4px base)
     ============================================ */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;


  /* ============================================
     SHARED: TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;


  /* ============================================
     SHARED: ANIMATION TOKENS
     Centralized durations & easings to prevent
     drift across components.
     ============================================ */

  /* Durations */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-enter: 300ms;   /* Elements appearing */
  --duration-exit: 200ms;    /* Elements disappearing */

  /* Easing curves */
  --ease-default: ease;
  --ease-in: cubic-bezier(0.4, 0, 1, 0.2);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);    /* Bouncy/organic feel */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Slight overshoot */

  /* Composed transitions (shorthand) */
  --animate-fade-in: var(--duration-enter) var(--ease-out);
  --animate-fade-out: var(--duration-exit) var(--ease-in);
  --animate-slide-up: var(--duration-enter) var(--ease-spring);
  --animate-scale: var(--duration-base) var(--ease-bounce);


  /* ============================================
     SHARED: CONTAINER MAX-WIDTHS
     ============================================ */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 960px;
  --container-xl: 1120px;
  --container-2xl: 1280px;


  /* ============================================
     SHARED: BREAKPOINTS (for reference)
     Use in @media queries as raw values:
     @media (max-width: 480px)  -- mobile
     @media (max-width: 640px)  -- mobile-landscape
     @media (max-width: 768px)  -- tablet
     @media (max-width: 960px)  -- tablet-landscape
     @media (max-width: 1120px) -- desktop-small
     @media (max-width: 1280px) -- desktop
     ============================================ */
  --bp-mobile: 480px;
  --bp-mobile-landscape: 640px;
  --bp-tablet: 768px;
  --bp-tablet-landscape: 960px;
  --bp-desktop-sm: 1120px;
  --bp-desktop: 1280px;


  /* ============================================
     SHARED: ICON SIZES
     Material Symbols optical sizing
     ============================================ */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 48px;


  /* ============================================
     SHARED: FOCUS RING
     Consistent :focus-visible styling
     ============================================ */
  --focus-ring-color: rgba(2, 132, 199, 0.5);
  --focus-ring-offset: 2px;
  --focus-ring-width: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);


  /* ============================================
     SHARED: Z-INDEX
     ============================================ */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
}


/* ============================================
   COMPONENT: App Badge

   Usage: Set --badge-primary and --badge-dark
   CSS vars to the app's brand colors, then
   apply the .app-badge class.

   Example:
   .my-badge {
     --badge-primary: var(--coach-primary);
     --badge-dark: var(--coach-dark);
     --badge-very-light: var(--coach-very-light);
   }
   ============================================ */

.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--badge-very-light);
  color: var(--badge-primary);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--font-normal);
  letter-spacing: 0.02em;
  border-radius: 16px;
  border: 1px solid var(--badge-dark);
}

.app-badge .material-symbols-outlined {
  font-size: 16px;
}

/* Pre-configured badge variants for each app */

.app-badge--mainsite {
  --badge-primary: var(--mainsite-primary);
  --badge-dark: var(--mainsite-dark);
  --badge-very-light: var(--mainsite-very-light);
}

.app-badge--tips {
  --badge-primary: var(--tips-primary);
  --badge-dark: var(--tips-dark);
  --badge-very-light: var(--tips-very-light);
}

.app-badge--podcasts {
  --badge-primary: var(--podcasts-primary);
  --badge-dark: var(--podcasts-dark);
  --badge-very-light: var(--podcasts-very-light);
}

.app-badge--planner {
  --badge-primary: var(--planner-primary);
  --badge-dark: var(--planner-dark);
  --badge-very-light: var(--planner-very-light);
}

.app-badge--coach {
  --badge-primary: var(--coach-primary);
  --badge-dark: var(--coach-dark);
  --badge-very-light: var(--coach-very-light);
}

.app-badge--intervention {
  --badge-primary: var(--intervention-primary);
  --badge-dark: var(--intervention-dark);
  --badge-very-light: var(--intervention-very-light);
}

.app-badge--dna {
  --badge-primary: var(--dna-primary);
  --badge-dark: var(--dna-dark);
  --badge-very-light: var(--dna-very-light);
}

.app-badge--training {
  --badge-primary: var(--training-primary);
  --badge-dark: var(--training-dark);
  --badge-very-light: var(--training-very-light);
}