/**
 * PullMode Design System Variables
 * Single source of truth for all design tokens
 * Based on PullMode Brand Book v3.0
 */

:root {
  /* ═══════════════════════════════════════
     COLORS - PullMode Brand Palette
     ═══════════════════════════════════════ */

  /* Primary palette */
  --color-main: #4B606E;           /* Slate - buttons, headings, text */
  --color-main-hover: #5A7080;     /* Slate Light - hover state */
  --color-main-active: #3D4F5C;    /* Slate Dark - active/pressed state */

  /* Background colors */
  --color-background: #D6EDFD;     /* Ice Blue - page background */
  --color-surface: #FFFFFF;        /* White - cards, forms */
  --color-surface-hover: #F4F6F8;  /* Light gray - hover on surfaces */

  /* Text colors */
  --color-text: #4B606E;           /* Slate - headings, body text */
  --color-text-muted: #91AABB;     /* Mist - secondary text, placeholders */
  --color-text-inverse: #FFFFFF;   /* White - text on Slate background */

  /* Border colors */
  --color-border: #91AABB;         /* Mist - borders, dividers */
  --color-border-light: #B8CDD9;   /* Light Mist - subtle borders */
  --color-border-focus: #4B606E;   /* Slate - focus rings */

  /* Selection & Interactive */
  --color-selection: #C5E0F5;      /* Selected state background */

  /* Status colors */
  --color-error: #D64545;
  --color-error-bg: #FEE2E2;
  --color-success: #16a34a;
  --color-success-bg: #DCFCE7;
  --color-warning: #ca8a04;
  --color-warning-bg: #FEF9C3;

  /* Traffic light diagram colors */
  --color-traffic-green: #22c55e;
  --color-traffic-yellow: #eab308;
  --color-traffic-red: #ef4444;

  /* Color opacity variants */
  --color-main-10: rgba(75, 96, 110, 0.1);
  --color-main-20: rgba(75, 96, 110, 0.2);
  --color-main-40: rgba(75, 96, 110, 0.4);

  /* Traffic light opacity variants */
  --color-traffic-green-10: rgba(34, 197, 94, 0.1);
  --color-traffic-green-20: rgba(34, 197, 94, 0.2);
  --color-traffic-yellow-10: rgba(234, 179, 8, 0.1);
  --color-traffic-yellow-20: rgba(234, 179, 8, 0.2);
  --color-traffic-red-10: rgba(239, 68, 68, 0.1);
  --color-traffic-red-20: rgba(239, 68, 68, 0.2);

  /* Overlay colors */
  --color-overlay-dark: rgba(0, 0, 0, 0.4);
  --color-overlay-light: rgba(255, 255, 255, 0.6);

  /* Chat bubble colors */
  --color-bubble-sender: #4B606E;
  --color-bubble-receiver: #e5e7eb;

  /* ═══════════════════════════════════════
     Gamification Colors
     ═══════════════════════════════════════ */

  /* XP display colors */
  --color-xp: #5B6FD9;                       /* Softer blue - less "techy" than indigo */
  --color-xp-glow: rgba(91, 111, 217, 0.3);  /* XP animation glow effect */

  /* Gamification feedback colors (opacity variants) */
  --color-success-glow: rgba(22, 163, 74, 0.4);         /* Success animation pulse */
  --color-success-glow-light: rgba(22, 163, 74, 0.2);   /* Success animation fade */

  --color-xp-glow-dark: rgba(91, 111, 217, 0.4);        /* XP stronger glow effect */
  --color-xp-glow-light: rgba(91, 111, 217, 0.15);      /* XP subtle background */
  --color-xp-glow-subtle: rgba(91, 111, 217, 0.08);     /* XP very subtle tint */

  --color-path-node-glow: rgba(91, 155, 213, 0.2);      /* Path node highlight glow */
  --color-path-node-glow-strong: rgba(91, 155, 213, 0.4); /* Path node pulse glow */
  --color-path-node-subtle: rgba(91, 155, 213, 0.08);   /* Path node subtle background */
  --color-path-node-medium: rgba(91, 155, 213, 0.15);   /* Path node medium background */

  --color-path-complete-subtle: rgba(124, 179, 124, 0.05);  /* Completed path subtle bg */
  --color-path-complete-light: rgba(124, 179, 124, 0.1);    /* Completed path light bg */
  --color-path-complete-medium: rgba(124, 179, 124, 0.15);  /* Completed path medium bg */

  --color-milestone-glow: rgba(232, 184, 109, 0.3);         /* Milestone celebration glow */
  --color-milestone-glow-strong: rgba(232, 184, 109, 0.5);  /* Milestone intense glow */
  --color-milestone-glow-light: rgba(232, 184, 109, 0.2);   /* Milestone light glow */
  --color-milestone-subtle: rgba(232, 184, 109, 0.1);       /* Milestone subtle fade */
  --color-milestone-medium: rgba(232, 184, 109, 0.4);       /* Milestone medium intensity */
  --color-milestone-strong: rgba(232, 184, 109, 0.6);       /* Milestone strong glow */
  --color-milestone-ring: rgba(232, 184, 109, 0.25);        /* Milestone ring effect */
  --color-milestone-shadow: rgba(232, 184, 109, 0.35);      /* Milestone drop shadow */

  --color-badge-shadow: rgba(0, 0, 0, 0.1);            /* Badge subtle shadow */
  --color-badge-shadow-medium: rgba(0, 0, 0, 0.15);    /* Badge medium shadow */
  --color-badge-shadow-strong: rgba(0, 0, 0, 0.2);     /* Badge stronger shadow */
  --color-badge-overlay: rgba(255, 255, 255, 0.8);     /* Badge highlight overlay */

  /* Shimmer animation colors */
  --color-shimmer-50: rgba(255, 255, 255, 0.5);
  --color-shimmer-80: rgba(255, 255, 255, 0.8);

  /* Level and notification colors */
  --color-level-bg: var(--color-main);        /* Level badge background */
  --color-toast-bg: var(--color-surface);     /* Toast notification background */
  --color-toast-border: var(--color-border-light);  /* Toast border */

  /* ═══════════════════════════════════════
     Warm Accent Colors (Gamification Enhancement)
     ═══════════════════════════════════════ */

  /* Warm accents for celebrations and encouragement */
  --color-celebration: #E8B86D;      /* Warm gold - milestones, level-ups, major achievements */
  --color-encouragement: #F5A962;    /* Soft orange - progress markers, streaks, positive feedback */
  --color-warmth: #D4A574;           /* Terracotta - special moments, premium features */

  /* ═══════════════════════════════════════
     Landing Page CTA Colors
     ═══════════════════════════════════════ */

  /* Primary CTA (warm coral for action/conversion) */
  --color-cta-primary: #E85A4F;        /* Warm coral - primary CTA buttons */
  --color-cta-primary-hover: #D64944;  /* CTA hover state */
  --color-cta-primary-active: #C43E39; /* CTA active/pressed state */

  /* Highlight accent (star ratings, badges, accents) */
  --color-highlight: #F5A962;          /* Soft orange - ratings, badges */

  /* Section backgrounds for landing pages */
  --color-urgency-bg: #FEF1F0;         /* Urgency section backgrounds */
  --color-warmth-bg: #FDF8F3;          /* Transformation section (warm cream) */

  /* Learning path visualization colors */
  --color-path-complete: #7CB37C;    /* Earthy green - completed lesson nodes */
  --color-path-current: #5B9BD5;     /* Soft blue - current position highlight with pulse */
  --color-path-locked: #B8A99A;      /* Muted warm gray - locked/unavailable items */
  --color-path-connector: #C4B5A6;   /* Warm gray - connecting lines between nodes */

  /* ═══════════════════════════════════════
     Gamification Sizing
     ═══════════════════════════════════════ */

  /* Badge sizes for different display contexts */
  --badge-size-sm: 40px;         /* Small badge - inline/compact use */
  --badge-size-md: 64px;         /* Medium badge - list displays */
  --badge-size-lg: 80px;         /* Large badge - showcase/detail view */

  /* Level and progress indicators */
  --level-badge-size: 24px;      /* Header level indicator */
  --progress-ring-size: 120px;   /* Dashboard progress ring */

  /* Toast notification sizing */
  --toast-width: 320px;          /* Toast notification width */
  --toast-gap: 12px;             /* Gap between stacked toasts */

  /* ═══════════════════════════════════════
     Learning Path Sizing
     ═══════════════════════════════════════ */

  /* Path node dimensions (8px grid) */
  --path-node-size: 48px;        /* Size of lesson nodes on path */
  --path-node-size-sm: 40px;     /* Mobile node size */
  --path-milestone-size: 56px;   /* Larger size for milestone nodes */
  --path-icon-size: 24px;        /* Icon size within nodes */

  /* Path connector dimensions */
  --path-connector-width: 3px;   /* Width of connecting lines */
  --path-connector-height: 40px; /* Height between nodes */

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

  /* Font families */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Archivo Black', 'Inter', sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Font sizes */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 48px;

  /* Landing page specific typography */
  --font-size-hero: 56px;        /* Hero headline only */
  --font-size-section: 36px;     /* Section titles */
  --font-size-card: 24px;        /* Card titles, FAQ questions */
  --font-size-subhead: 20px;     /* Subheadlines */
  --font-size-body-lg: 20px;     /* Hero subtitle, lead text */

  /* Font weights (Inter) */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Letter spacing */
  --letter-spacing-tight: -0.02em;   /* Large headlines */
  --letter-spacing-normal: 0em;      /* Body text */
  --letter-spacing-wide: 0.02em;     /* Subheadings, card titles */
  --letter-spacing-wider: 0.05em;    /* Buttons, badges, uppercase */

  /* ═══════════════════════════════════════
     SPACING (8px base unit)
     ═══════════════════════════════════════ */

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

  /* ═══════════════════════════════════════
     BORDERS & RADIUS
     ═══════════════════════════════════════ */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --border-width: 2px;

  /* ═══════════════════════════════════════
     SHADOWS (PullMode brandbook)
     ═══════════════════════════════════════ */

  --shadow-sm: 0 1px 3px rgba(75, 96, 110, 0.06);
  --shadow-md: 0 2px 8px rgba(75, 96, 110, 0.08);
  --shadow-lg: 0 4px 16px rgba(75, 96, 110, 0.12);
  --shadow-hover: 0 8px 24px rgba(75, 96, 110, 0.15);
  --shadow-button: 0 4px 12px rgba(75, 96, 110, 0.3);

  /* ═══════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════ */

  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ═══════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════ */

  --container-narrow: 520px;
  --container-default: 640px;
  --container-wide: 800px;

  /* Landing page containers */
  --container-landing: 1200px;       /* Hero, Pricing grid */
  --container-content: 800px;        /* Body text sections */
  --container-card-grid: 1000px;     /* Pain points, Testimonials */

  /* Section padding for landing pages */
  --section-padding-lg: 80px;        /* Emphasis sections (Hero, Pricing, Final CTA) */
  --section-padding-md: 64px;        /* Standard sections */
  --section-padding-sm: 48px;        /* Compact sections */

  /* ═══════════════════════════════════════
     Z-INDEX
     ═══════════════════════════════════════ */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 500;

  /* ═══════════════════════════════════════
     MASQUERADE
     ═══════════════════════════════════════ */

  /* Banner height - will be set by JS when masquerade is active */
  --masquerade-banner-height: 0px;
}

/* ═══════════════════════════════════════
   RESPONSIVE TYPOGRAPHY
   ═══════════════════════════════════════ */

/* Responsive typography - tablet */
@media (max-width: 768px) {
  :root {
    --font-size-4xl: 36px;
    --font-size-3xl: 28px;
    --font-size-hero: 36px;
    --font-size-section: 28px;
    --font-size-card: 20px;
    --font-size-body-lg: 18px;
    --section-padding-lg: 48px;
    --section-padding-md: 40px;
    --section-padding-sm: 32px;
  }
}

/* Responsive typography - mobile */
@media (max-width: 480px) {
  :root {
    --font-size-4xl: 28px;
    --font-size-3xl: 24px;
  }
}