/* ============================================
   RENATUS COLOR TOKENS
   Based on Figma Design System 2026

   BRAND PALETTE:
   - Pink: #FF38B2
   - Hot Pink: #FF6AC6
   - Rose: #FF4670
   - Coral: #FF6969
   - Orange: #FF9A42 (80%)
   - Amber: #FFBC53
   - Yellow: #FFD400
   - Black: #0F0F0F
   - Gray Dark: #666666
   - Gray Mid: #BBBBBB
   - Gray Light: #E6E6E6
   - Gray Background: #F5F5F5
   - Off White: #FAFAFA
   - White: #FFFFFF
   - Positive: #22C55E
   ============================================ */

:root {

  /* ============================================
     BRAND PALETTE - Source of Truth
     ============================================ */

  --brand-pink: #FF38B2;
  --brand-primary: var(--brand-pink);
  --brand-soft-pink: #FF1FB0;
  --brand-hot-pink: #FF6AC6;
  --brand-rose: #FF4670;
  --brand-coral: #FF7070;
  --brand-orange: #FF9A42;
  --brand-amber: #FFBC53;
  --brand-yellow: #FFD400;

  --brand-gradient: linear-gradient(128deg, #FF38B2 4%, rgba(255, 109, 77, 0.8) 89%);
  --brand-gradient-horizontal: linear-gradient(90deg, #FF38B2 4%, rgba(255, 109, 77, 0.8) 89%);
  --brand-gradient-vertical: linear-gradient(180deg, #FF38B2 4%, rgba(255, 109, 77, 0.8) 89%);
  --survey-gradient: linear-gradient(128deg, #FF7E7E 1%, rgba(255, 179, 71, 0.8) 100%);
  --workshop-gradient: linear-gradient(128deg, #FF38B2 -50%, rgba(255, 109, 77, 0.8) 60%, rgba(255, 179, 71, 0.8) 150%);
  --workshop-primary: #FF7E7E;
  --workshop-primary-hover: #E86E6E;
  --workshop-cta: #FF7E7E;

  --highlight-bg: rgba(255, 154, 66, 0.12);
  --highlight-text: var(--brand-orange);


  /* ============================================
     CORE NEUTRALS - Source of Truth
     ============================================ */

  --color-black: #0F0F0F;
  --color-white: #FFFFFF;
  --color-off-white: #FAFAFA;
  --gray-dark: #666666;
  --gray-mid: #BBBBBB;
  --gray-light: #E6E6E6;
  --gray-background: #F5F5F5;


  /* ============================================
     TRAFFIC LIGHTS - Source of Truth
     ============================================ */

  --color-positive: #22C55E;
  --color-neutral: var(--brand-orange);
  --color-negative: var(--brand-rose);


  /* ============================================
     LEGACY BRAND TOKENS
     Keep names, map to brand palette
     ============================================ */

  --pink: var(--brand-pink);
  --pink-hover: var(--brand-rose);
  --navy: var(--color-black);


  /* ============================================
     LEGACY GRAY SCALE
     Keep names, map to brand grays
     ============================================ */

  --gray-100: var(--gray-background);
  --gray-200: var(--gray-light);
  --gray-300: var(--gray-light);
  --gray-400: #999999;
  --gray-500: var(--gray-mid);
  --gray-700: var(--gray-dark);
  --gray-800: var(--color-black);


  /* ============================================
     SEMANTIC TEXT
     ============================================ */

  --text-primary: var(--color-black);
  --text-secondary: var(--gray-dark);
  --text-muted: var(--gray-mid);
  --text-placeholder: var(--gray-mid);
  --text-accent: var(--brand-pink);


  /* ============================================
     SEMANTIC BACKGROUNDS
     ============================================ */

  --bg-primary: var(--color-white);
  --bg-secondary: var(--gray-light);
  --bg-subtle: var(--gray-background);
  --bg-light: var(--color-white);
  --bg-overlay: rgba(15, 15, 15, 0.95);


  /* ============================================
     SEMANTIC BORDERS
     ============================================ */

  --border-color: var(--gray-light);
  --border-light: var(--gray-light);


  /* ============================================
     STATUS COLORS
     ============================================ */

  --color-success: var(--color-positive);
  --color-warning: var(--color-neutral);
  --color-error: var(--color-negative);

  --status-success-bg: rgba(34, 197, 94, 0.15);
  --status-success-text: var(--color-black);
  --status-success-border: var(--color-positive);

  --status-warning-bg: rgba(255, 154, 66, 0.15);
  --status-warning-text: var(--color-black);
  --status-warning-border: var(--color-neutral);

  --status-error-bg: rgba(255, 70, 112, 0.15);
  --status-error-text: var(--color-black);
  --status-error-border: var(--color-negative);


  /* ============================================
     CATEGORY COLORS
     ============================================ */

  --category-insight: var(--brand-pink);
  --category-course: var(--brand-pink);
  --category-quiz: var(--brand-pink);
  --category-color: var(--brand-pink);
  --category-report: var(--brand-pink);
  --category-workshop: var(--brand-orange);
  --category-survey: var(--brand-rose);

  --color-insight: var(--brand-pink);
  --color-course: var(--brand-pink);
  --color-quiz: var(--brand-pink);


  /* ============================================
     CHART COLORS
     ============================================ */

  --chart-red: var(--brand-rose);
  --chart-orange: var(--brand-orange);
  --chart-blue: var(--brand-pink);
  --chart-green: var(--color-positive);

  --chart-text-primary: var(--color-black);
  --chart-text-secondary: var(--gray-dark);
  --chart-text-muted: var(--gray-mid);
  --chart-border: var(--gray-light);
  --chart-background: var(--color-white);
  --chart-background-subtle: var(--gray-background);
  --chart-shadow: rgba(15, 15, 15, 0.08);

  --chart-accent: var(--brand-pink);
  --chart-accent-secondary: var(--brand-orange);


  /* ============================================
     ACCENT COLORS
     ============================================ */

  --accent-gold: var(--brand-yellow);
  --accent-amber: var(--brand-amber);
  --accent-orange: var(--brand-orange);
  --accent-coral: var(--brand-coral);
  --accent-hot-pink: var(--brand-hot-pink);


  /* ============================================
     GRADIENTS
     ============================================ */

  --gradient-pink-end: var(--brand-orange);
  --gradient-blue-start: var(--brand-pink);
  --gradient-blue-end: var(--brand-orange);
  --gradient-green-start: var(--color-positive);
  --gradient-green-end: var(--color-positive);
  --gradient-brand-soft: linear-gradient(135deg, rgba(255, 0, 170, 0.1) 0%, rgba(255, 154, 66, 0.1) 100%);


  /* ============================================
     COURSES PALETTE
     ============================================ */

  --courses-gradient: var(--brand-gradient);
  --courses-gradient-subtle: linear-gradient(135deg, rgba(255, 0, 170, 0.08) 0%, rgba(255, 154, 66, 0.08) 100%);

  --courses-primary: var(--brand-pink);
  --courses-secondary: var(--brand-orange);
  --courses-accent: var(--brand-yellow);

  --courses-high: var(--brand-rose);
  --courses-medium: var(--brand-orange);
  --courses-low: var(--color-positive);

  --courses-high-bg: rgba(255, 70, 112, 0.15);
  --courses-medium-bg: rgba(255, 154, 66, 0.15);
  --courses-low-bg: rgba(34, 197, 94, 0.15);

  --courses-leading: var(--brand-pink);
  --courses-advancing: var(--color-positive);
  --courses-experimenting: var(--brand-orange);
  --courses-lagging: var(--gray-dark);

  --courses-leading-bg: rgba(255, 0, 170, 0.15);
  --courses-advancing-bg: rgba(34, 197, 94, 0.15);
  --courses-experimenting-bg: rgba(255, 154, 66, 0.15);
  --courses-lagging-bg: rgba(102, 102, 102, 0.15);


  /* ============================================
     INSIGHTS PALETTE
     ============================================ */

  --insights-gradient: var(--brand-gradient);
  --insights-gradient-subtle: linear-gradient(135deg, rgba(255, 0, 170, 0.08) 0%, rgba(255, 154, 66, 0.08) 100%);

  --insights-primary: var(--brand-pink);
  --insights-secondary: var(--brand-orange);
  --insights-accent: var(--brand-yellow);

  --insights-high: var(--brand-pink);
  --insights-medium: var(--brand-orange);
  --insights-low: var(--brand-yellow);

  --insights-high-bg: rgba(255, 0, 170, 0.1);
  --insights-medium-bg: rgba(255, 154, 66, 0.1);
  --insights-low-bg: rgba(255, 212, 0, 0.15);

  --insights-leading: var(--brand-pink);
  --insights-advancing: var(--brand-orange);
  --insights-experimenting: var(--brand-yellow);
  --insights-lagging: var(--gray-dark);

  --insights-leading-bg: rgba(255, 0, 170, 0.1);
  --insights-advancing-bg: rgba(255, 154, 66, 0.1);
  --insights-experimenting-bg: rgba(255, 212, 0, 0.1);
  --insights-lagging-bg: rgba(102, 102, 102, 0.15);


  /* ============================================
     SHADOWS
     ============================================ */

  --shadow: 0 1px 3px rgba(15, 15, 15, 0.1);
  --shadow-sm: 0 1px 3px rgba(15, 15, 15, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 15, 15, 0.10);
  --shadow-lg: 0 8px 24px rgba(15, 15, 15, 0.10);
  --shadow-xl: 0 12px 48px rgba(15, 15, 15, 0.12);
  --shadow-card: 0 8px 32px rgba(15, 15, 15, 0.10);
  --shadow-card-hover: 0 12px 48px rgba(15, 15, 15, 0.14);
  --shadow-float: 0 4px 20px rgba(15, 15, 15, 0.08), 0 1px 4px rgba(15, 15, 15, 0.04);
  --shadow-float-hover: 0 12px 36px rgba(15, 15, 15, 0.12), 0 2px 8px rgba(15, 15, 15, 0.06);
  --shadow-card-mobile: 0 2px 12px rgba(15, 15, 15, 0.08);
  --shadow-card-mobile-hover: 0 4px 16px rgba(15, 15, 15, 0.10);
  --shadow-panel: -20px 0 60px rgba(15, 15, 15, 0.08);
  --shadow-input: 0 2px 12px rgba(15, 15, 15, 0.08);
  --shadow-input-focus: 0 4px 16px rgba(15, 15, 15, 0.12);
  --shadow-fab: 0 8px 24px rgba(255, 0, 170, 0.3);

  --focus-ring: 0 0 0 2px var(--brand-pink);


  /* ============================================
     OVERLAY
     ============================================ */

  --overlay-bg: rgba(15, 15, 15, 0.5);


  /* ============================================
     BORDER RADIUS
     ============================================ */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-full: 999px;


  /* ============================================
     BUTTONS
     ============================================ */

  --btn-bg: var(--color-black);
  --btn-bg-hover: var(--color-black);
  --btn-text: var(--color-white);
  --btn-radius: var(--radius-full);
  --btn-shadow-hover: var(--shadow-md);
  --btn-transform-hover: translateY(-2px);


  /* ============================================
     REPORT-SPECIFIC TOKENS
     ============================================ */

  --report-cover-gradient: var(--brand-gradient);
  --report-accent: var(--brand-pink);
  --report-text: var(--color-black);
  --report-text-secondary: var(--gray-dark);
  --report-bg: var(--color-white);
  --report-bg-subtle: var(--gray-background);
  --report-border: var(--gray-light);
  --report-confidence-high: var(--color-positive);
  --report-confidence-medium: var(--color-neutral);
  --report-confidence-low: var(--color-negative);
}