:root {
  /* Typography */
  --pp-font-ui: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pp-font-longform: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Primary (Blue) */
  --pp-primary-50: #EFF6FF;
  --pp-primary-100: #DBEAFE;
  --pp-primary-300: #93C5FD;
  --pp-primary-500: #187FE8;
  --pp-primary-600: #1670DC;
  --pp-primary-700: #0056B3;
  --pp-primary-900: #0B2A4A;

  /* Secondary (Teal/Cyan - Premium) */
  --pp-secondary-50: #ECFEFF;
  --pp-secondary-100: #CFFAFE;
  --pp-secondary-300: #67E8F9;
  --pp-secondary-500: #06B6D4;
  --pp-secondary-600: #0891B2;
  --pp-secondary-700: #0E7490;
  --pp-secondary-900: #164E63;

  /* Neutrals */
  --pp-bg-soft: #F8F8F7;
  --pp-white: #FFFFFF;
  --pp-neutral-50: #F9FAFB;
  --pp-neutral-100: #F3F4F6;
  --pp-neutral-200: #E5E7EB;
  --pp-neutral-300: #D1D5DB;
  --pp-neutral-400: #9CA3AF;
  --pp-neutral-500: #6B7280;
  --pp-neutral-700: #374151;
  --pp-neutral-800: #1F2937;
  --pp-neutral-900: #111827;

  /* Semantic */
  --pp-success-50: #ECFDF5;
  --pp-success-500: #10B981;
  --pp-success-600: #059669;
  --pp-warning-50: #FFFBEB;
  --pp-warning-500: #F59E0B;
  --pp-warning-600: #D97706;
  --pp-error-500: #EF4444;
  --pp-error-600: #DC2626;
  --pp-error-700: #B91C1C;
  --pp-info-500: #06B6D4;

  /* Radii */
  --pp-radius-sm: 8px;
  --pp-radius-lg: 12px;
  --pp-radius-xl: 16px;
  --pp-radius-2xl: 24px;
  --pp-radius-3xl: 32px;
  --pp-radius-pill: 9999px;

  /* Theme (light default) */
  --pp-bg: var(--pp-bg-soft);
  --pp-surface: var(--pp-white);
  --pp-surface-glass: rgba(255, 255, 255, 0.93);
  --pp-text: var(--pp-neutral-900);
  --pp-text-secondary: var(--pp-neutral-700);
  --pp-text-muted: var(--pp-neutral-500);
  --pp-border: var(--pp-neutral-200);
  --pp-link: var(--pp-primary-500);
  --pp-link-hover: var(--pp-primary-600);
  --pp-focus: var(--pp-primary-500);

  /* Gradients (allowed) - Subtle gradients only */
  --pp-grad-cta: linear-gradient(90deg, var(--pp-primary-500), var(--pp-primary-600));
  --pp-grad-brand: linear-gradient(135deg, var(--pp-primary-500), var(--pp-primary-600));
  --pp-grad-hero-keyword: linear-gradient(to right, #187FE8, #1670DC);
  --pp-grad-footer: linear-gradient(40deg, rgb(20, 30, 48), rgb(36, 59, 85));
  --pp-grad-founders: linear-gradient(90deg, var(--pp-warning-500), #F97316);

  /* Shadows (system intent; keep few levels) */
  --pp-shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --pp-shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.12), 0 4px 6px -4px rgb(0 0 0 / 0.12);
  --pp-shadow-modal: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Dark mode theme swap */
html.dark {
  --pp-bg: #0B1220;
  --pp-surface: rgba(17, 24, 39, 0.92);
  --pp-surface-glass: rgba(17, 24, 39, 0.78);
  --pp-neutral-50: #1F2937; /* Dark gray for gradients in dark mode */
  --pp-text: #E5E7EB;
  --pp-text-secondary: #D1D5DB;
  --pp-text-muted: rgba(156, 163, 175, 0.85);
  --pp-border: rgba(255, 255, 255, 0.10);
  --pp-link: var(--pp-primary-300);
  --pp-link-hover: var(--pp-primary-100);
  --pp-focus: var(--pp-primary-300);

  --pp-shadow-card: 0 8px 16px -6px rgb(0 0 0 / 0.55);
  --pp-shadow-card-hover: 0 16px 28px -10px rgb(0 0 0 / 0.65);
  --pp-shadow-modal: 0 30px 70px -20px rgb(0 0 0 / 0.75);
}

/* ============================================
   WORKSPACE APP SHELL TOKENS
   Professional Tool UI - Dark Chrome / Light Stage
   ============================================ */

:root {
  /* Workspace Layout Dimensions */
  --ws-sidebar-width: 68px;
  --ws-subpanel-width: 402px;
  --ws-topbar-height: 56px;
  
  /* Workspace Palette - Light Mode (default) */
  --ws-chrome-deepest: #f8f9fa;      /* Sidebar background - light gray */
  --ws-chrome-deep: #ffffff;         /* Sidebar background - white */
  --ws-chrome-mid: #ffffff;          /* Sub-panel background - white */
  --ws-chrome-light: #f3f4f6;        /* Sub-panel hover/elevated - light gray */
  --ws-chrome-lighter: #e5e7eb;      /* Interactive states - lighter gray */
  
  /* Workspace Stage (where content lives) */
  --ws-stage-bg: #f4f4f5;           /* Main canvas background */
  --ws-stage-surface: #ffffff;       /* Poster/iframe background */
  
  /* Workspace Text (for light mode) */
  --ws-text-primary: var(--pp-text);        /* Dark text on light */
  --ws-text-secondary: var(--pp-text-secondary);      /* Muted text */
  --ws-text-tertiary: var(--pp-text-muted);       /* Very muted */
  
  /* Workspace Borders */
  --ws-border-chrome: var(--pp-border);  /* Uses existing border token */
  
  /* Workspace Accents (use brand primary) */
  --ws-accent: var(--pp-primary-500);
  --ws-accent-hover: var(--pp-primary-600);
  --ws-accent-muted: var(--pp-primary-300);
  
  /* Workspace Radii (tighter than marketing for precision feel) */
  --ws-radius-xs: 2px;
  --ws-radius-sm: 4px;
  --ws-radius-md: 6px;
  --ws-radius-lg: 8px;
  
  /* Workspace Transitions (snappy, precise) */
  --ws-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --ws-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ws-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Workspace Shadows (subtle for pro look) */
  --ws-shadow-subtle: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
  --ws-shadow-elevated: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  --ws-shadow-floating: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
  
  /* Workspace Overlay (full-screen loading) */
  --ws-overlay-bg: rgba(255, 255, 255, 0.92);  /* Light mode - white with transparency */
  --ws-overlay-blur: blur(12px) saturate(1.2);
}

/* Dark Mode - Workspace respects html.dark */
html.dark {
  /* Workspace Palette - Dark Chrome (aligned with general website dark mode) */
  --ws-chrome-deepest: #0B1220;      /* Sidebar background deep - matches --pp-bg */
  --ws-chrome-deep: #111827;         /* Sidebar background - matches --pp-surface base color */
  --ws-chrome-mid: #1F2937;          /* Sub-panel background - matches --pp-neutral-50 */
  --ws-chrome-light: #374151;        /* Sub-panel hover/elevated - matches --pp-neutral-700 */
  --ws-chrome-lighter: #4B5563;      /* Interactive states - slightly lighter for hover states */
  
  /* Workspace Stage (where content lives) - Dark Mode */
  /* Using brighter gray for canvas to reduce contrast with white posters */
  --ws-stage-bg: #2D3748;           /* Medium gray canvas background - comfortable for viewing white posters */
  --ws-stage-surface: #111827;      /* Topbar/iframe containers - matches --pp-surface base color */
  
  /* Workspace Text (for dark chrome) */
  --ws-text-primary: #fafafa;        /* Bright text on dark */
  --ws-text-secondary: #a1a1aa;      /* Muted text on dark */
  --ws-text-tertiary: #71717a;       /* Very muted on dark */
  
  /* Workspace Borders */
  --ws-border-chrome: rgba(255, 255, 255, 0.08);  /* Light border on dark */
  
  /* Workspace Shadows (adjusted for dark mode) */
  --ws-shadow-subtle: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.3);
  --ws-shadow-elevated: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --ws-shadow-floating: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
  
  /* Workspace Overlay (dark mode) - aligned with general website */
  --ws-overlay-bg: rgba(11, 18, 32, 0.92);  /* Dark mode - matches --pp-bg with transparency */
  
  /* Neutral colors for dark mode (for step indicators, etc) */
  --pp-neutral-200: #3f3f46;  /* Zinc 700 - darker in dark mode for backgrounds */
  
  /* Semantic colors adjusted for dark mode */
  --pp-success-50: rgba(16, 185, 129, 0.15);  /* Translucent success bg */
  --pp-warning-50: rgba(245, 158, 11, 0.15);  /* Translucent warning bg */
}