/* ==========================================================================
   PLAN B Design Tokens
   Architecture: RGB PRIMITIVES → ALPHA PRIMITIVES → BASE COLORS →
                 EFFECT COLORS → SEMANTIC STATES → COMPONENT TOKENS
   ========================================================================== */

/* ==========================================================================
   RGB PRIMITIVES — Source color channels (authoritative values)
   ========================================================================== */
:root {
  /* Neutral */
  --pb-rgb-black: 0 0 0;
  --pb-rgb-white: 255 255 255;

  /* Background */
  --pb-rgb-bg: 7 11 18;
  --pb-rgb-bg-secondary: 11 18 32;

  /* Surface */
  --pb-rgb-surface: 17 25 39;
  --pb-rgb-surface-hover: 22 34 53;

  /* Border */
  --pb-rgb-border: 36 50 71;
  --pb-rgb-border-hover: 52 68 90;
  --pb-rgb-disabled-border: 26 37 51;

  /* Text */
  --pb-rgb-text-primary: 244 247 251;
  --pb-rgb-text-secondary: 143 156 175;
  --pb-rgb-text-muted: 93 106 125;

  /* Accent (green) */
  --pb-rgb-accent: 98 230 167;
  --pb-rgb-accent-strong: 53 216 142;
  --pb-rgb-accent-hover: 138 240 190;
  --pb-rgb-accent-active: 43 197 127;

  /* Semantic colors */
  --pb-rgb-warning: 245 196 81;
  --pb-rgb-error: 255 102 120;
  --pb-rgb-info: 96 165 250;
  --pb-rgb-success: 82 196 26;

  /* Contrast colors for semantic states */
  --pb-rgb-success-contrast: 5 33 15;
  --pb-rgb-warning-contrast: 51 36 0;
  --pb-rgb-danger-contrast: 42 5 5;

  /* Background glows */
  --pb-rgb-bg-glow-green: 18 53 43;
  --pb-rgb-bg-glow-blue: 19 35 61;
  --pb-rgb-bg-glow-purple: 37 27 61;

  /* Glow/purple usage */
  --pb-rgb-purple: 139 92 246;

  /* Shadow base (bluish dark used for card hover shadows) */
  --pb-rgb-shadow: 16 24 40;

  /* Warning banner variants */
  --pb-rgb-warning-bg-light: 255 247 224;
  --pb-rgb-warning-text-light: 255 232 179;
  --pb-rgb-warning-icon: 207 133 6;

  /* Danger banner variants */
  --pb-rgb-danger-bg-light: 255 240 240;
  --pb-rgb-danger-text-dark: 90 16 16;
  --pb-rgb-danger-text-light: 255 201 201;
}

/* ==========================================================================
   ALPHA PRIMITIVES — Source opacity values
   ========================================================================== */
:root {
  /* Accent alpha */
  --pb-alpha-accent-soft: 0.08;
  --pb-alpha-accent-subtle: 0.10;
  --pb-alpha-accent-border: 0.22;
  --pb-alpha-accent-glow: 0.22;
  --pb-alpha-accent-glow-strong: 0.30;
  --pb-alpha-accent-glow-soft: 0.15;
  --pb-alpha-accent-ring: 0.25;
  --pb-alpha-accent-glow-halo: 0.50;

  /* Warning alpha */
  --pb-alpha-warning: 0.10;
  --pb-alpha-warning-border: 0.22;
  --pb-alpha-warning-soft-strong: 0.14;
  --pb-alpha-warning-border-strong: 0.55;
  --pb-alpha-warning-fill: 0.90;
  --pb-alpha-warning-icon: 0.15;

  /* Error alpha */
  --pb-alpha-error: 0.10;
  --pb-alpha-error-border: 0.22;
  --pb-alpha-danger-soft-strong: 0.16;
  --pb-alpha-danger-border-strong: 0.60;
  --pb-alpha-danger-soft-icon: 0.12;

  /* Info alpha */
  --pb-alpha-info: 0.10;
  --pb-alpha-info-border: 0.22;

  /* Success alpha */
  --pb-alpha-success: 0.10;
  --pb-alpha-success-border: 0.22;
  --pb-alpha-success-strong: 0.12;

  /* Neutral alpha */
  --pb-alpha-neutral: 0.08;
  --pb-alpha-white-subtle: 0.04;
  --pb-alpha-white-soft: 0.06;
  --pb-alpha-white-overlay: 0.18;
  --pb-alpha-overlay: 0.65;

  /* Surface alpha */
  --pb-alpha-surface: 0.60;
  --pb-alpha-surface-hover: 0.80;

  /* Border alpha */
  --pb-alpha-border: 0.30;
  --pb-alpha-border-hover: 0.45;

  /* Text alpha */
  --pb-alpha-text-muted: 0.60;

  /* Shadow alpha */
  --pb-alpha-shadow-sm: 0.06;
  --pb-alpha-shadow-md: 0.10;
  --pb-alpha-shadow-lg: 0.15;
  --pb-alpha-shadow-xl: 0.20;
  --pb-alpha-shadow-card-hover: 0.12;
  --pb-alpha-shadow-card-hover-strong: 0.40;

  /* Focus ring alpha */
  --pb-alpha-focus-ring: 0.35;

  /* Background glow alpha */
  --pb-alpha-bg-glow-green: 0.15;
  --pb-alpha-bg-glow-blue: 0.12;
  --pb-alpha-bg-glow-purple: 0.10;
  --pb-alpha-bg-glow-green-dim: 0.10;
  --pb-alpha-bg-glow-blue-dim: 0.08;
  --pb-alpha-bg-glow-purple-dim: 0.08;
  --pb-alpha-bg-grid: 0.02;
  --pb-alpha-bg-noise: 0.03;
}

/* ==========================================================================
   BASE COLORS — Direct rgb() values from RGB primitives
   ========================================================================== */
:root {
  --pb-bg: rgb(var(--pb-rgb-bg));
  --pb-bg-secondary: rgb(var(--pb-rgb-bg-secondary));

  --pb-white: rgb(var(--pb-rgb-white));

  --pb-surface: rgb(var(--pb-rgb-surface));
  --pb-surface-hover: rgb(var(--pb-rgb-surface-hover));

  --pb-border: rgb(var(--pb-rgb-border));
  --pb-border-hover: rgb(var(--pb-rgb-border-hover));
  --pb-disabled-border: rgb(var(--pb-rgb-disabled-border));

  --pb-text-primary: rgb(var(--pb-rgb-text-primary));
  --pb-text-secondary: rgb(var(--pb-rgb-text-secondary));
  --pb-text-muted: rgb(var(--pb-rgb-text-muted));

  --pb-accent: rgb(var(--pb-rgb-accent));
  --pb-accent-strong: rgb(var(--pb-rgb-accent-strong));
  --pb-accent-hover: rgb(var(--pb-rgb-accent-hover));
  --pb-accent-active: rgb(var(--pb-rgb-accent-active));

  --pb-warning: rgb(var(--pb-rgb-warning));
  --pb-error: rgb(var(--pb-rgb-error));
  --pb-info: rgb(var(--pb-rgb-info));
  --pb-success: rgb(var(--pb-rgb-success));

  --pb-success-contrast: rgb(var(--pb-rgb-success-contrast));
  --pb-warning-contrast: rgb(var(--pb-rgb-warning-contrast));
  --pb-danger-contrast: rgb(var(--pb-rgb-danger-contrast));

  --pb-bg-glow-green: rgb(var(--pb-rgb-bg-glow-green));
  --pb-bg-glow-blue: rgb(var(--pb-rgb-bg-glow-blue));
  --pb-bg-glow-purple: rgb(var(--pb-rgb-bg-glow-purple));

  
}

/* ==========================================================================
   EFFECT COLORS — With alpha transparency using alpha tokens
   ========================================================================== */
:root {
  /* Accent effects */
  --pb-accent-soft: rgba(var(--pb-rgb-accent), var(--pb-alpha-accent-soft));
  --pb-accent-subtle: rgba(var(--pb-rgb-accent), var(--pb-alpha-accent-subtle));
  --pb-accent-border: rgba(var(--pb-rgb-accent), var(--pb-alpha-accent-border));
  --pb-accent-glow: rgba(var(--pb-rgb-accent), var(--pb-alpha-accent-glow));
  --pb-accent-glow-strong: rgba(var(--pb-rgb-accent), var(--pb-alpha-accent-glow-strong));

  /* Warning effects */
  --pb-warning-soft: rgba(var(--pb-rgb-warning), var(--pb-alpha-warning));
  --pb-warning-border: rgba(var(--pb-rgb-warning), var(--pb-alpha-warning-border));

  /* Error effects */
  --pb-error-soft: rgba(var(--pb-rgb-error), var(--pb-alpha-error));
  --pb-error-border: rgba(var(--pb-rgb-error), var(--pb-alpha-error-border));

  /* Info effects */
  --pb-info-soft: rgba(var(--pb-rgb-info), var(--pb-alpha-info));
  --pb-info-border: rgba(var(--pb-rgb-info), var(--pb-alpha-info-border));

  /* Success effects */
  --pb-success-soft: rgba(var(--pb-rgb-success), var(--pb-alpha-success));
  --pb-success-border: rgba(var(--pb-rgb-success), var(--pb-alpha-success-border));
  --pb-success-soft-strong: rgb(var(--pb-rgb-success) / var(--pb-alpha-success-strong));

  /* White overlay effects */
  --pb-white-soft: rgb(var(--pb-rgb-white) / var(--pb-alpha-white-soft));
  --pb-white-overlay: rgb(var(--pb-rgb-white) / var(--pb-alpha-white-overlay));

  /* Warning banner / toast effects */
  --pb-warning-soft-strong: rgb(var(--pb-rgb-warning) / var(--pb-alpha-warning-soft-strong));
  --pb-warning-border-strong: rgb(var(--pb-rgb-warning) / var(--pb-alpha-warning-border-strong));
  --pb-warning-fill: rgb(var(--pb-rgb-warning) / var(--pb-alpha-warning-fill));
  --pb-warning-bg-light: rgb(var(--pb-rgb-warning-bg-light));
  --pb-warning-text-light: rgb(var(--pb-rgb-warning-text-light));
  --pb-warning-icon-soft: rgb(var(--pb-rgb-warning-icon) / var(--pb-alpha-warning-icon));

  /* Danger banner / message effects */
  --pb-danger-soft-strong: rgb(var(--pb-rgb-error) / var(--pb-alpha-danger-soft-strong));
  --pb-danger-border-strong: rgb(var(--pb-rgb-error) / var(--pb-alpha-danger-border-strong));
  --pb-danger-bg-light: rgb(var(--pb-rgb-danger-bg-light));
  --pb-danger-text-dark: rgb(var(--pb-rgb-danger-text-dark));
  --pb-danger-text-light: rgb(var(--pb-rgb-danger-text-light));
  --pb-danger-icon-soft: rgb(var(--pb-rgb-error) / var(--pb-alpha-danger-soft-icon));

  /* Neutral effects */
  --pb-neutral-soft: rgba(var(--pb-rgb-text-primary), var(--pb-alpha-neutral));
  --pb-white-subtle: rgba(var(--pb-rgb-white), var(--pb-alpha-white-subtle));
  --pb-overlay: rgba(var(--pb-rgb-black), var(--pb-alpha-overlay));

  /* Surface effects */
  --pb-surface-translucent: rgba(var(--pb-rgb-surface), var(--pb-alpha-surface));
  --pb-surface-hover-translucent: rgba(var(--pb-rgb-surface-hover), var(--pb-alpha-surface-hover));

  /* Border effects */
  --pb-border-translucent: rgba(var(--pb-rgb-border), var(--pb-alpha-border));
  --pb-border-hover-translucent: rgba(var(--pb-rgb-border-hover), var(--pb-alpha-border-hover));

  /* Text effects */
  --pb-text-muted-translucent: rgba(var(--pb-rgb-text-muted), var(--pb-alpha-text-muted));

  /* Shadow effects */
  --pb-shadow-sm: 0 1px 2px rgba(var(--pb-rgb-black), var(--pb-alpha-shadow-sm));
  --pb-shadow-md: 0 4px 8px rgba(var(--pb-rgb-black), var(--pb-alpha-shadow-md));
  --pb-shadow-lg: 0 8px 24px rgba(var(--pb-rgb-black), var(--pb-alpha-shadow-lg));
  --pb-shadow-xl: 0 16px 48px rgba(var(--pb-rgb-black), var(--pb-alpha-shadow-xl));

  /* Card hover shadow */
  --pb-shadow-card-hover: 0 8px 24px rgb(var(--pb-rgb-shadow) / var(--pb-alpha-shadow-card-hover));
  --pb-shadow-card-hover-strong: 0 8px 24px rgb(var(--pb-rgb-black) / var(--pb-alpha-shadow-card-hover-strong));

  /* Toast shadow */
  --pb-shadow-toast: 0 4px 12px rgb(var(--pb-rgb-shadow) / var(--pb-alpha-shadow-lg)), 0 2px 4px rgb(var(--pb-rgb-shadow) / var(--pb-alpha-shadow-md));

  /* Focus ring */
  --pb-focus-ring: 0 0 0 3px rgba(var(--pb-rgb-accent), var(--pb-alpha-focus-ring));
}

/* ==========================================================================
   SEMANTIC STATES — Meaning-based color assignments
   ========================================================================== */
:root {
  /* Primary brand */
  --pb-brand-primary: var(--pb-accent-strong);
  --pb-brand-primary-hover: var(--pb-accent-hover);
  --pb-brand-primary-active: var(--pb-accent-active);
  --pb-brand-on-primary: rgb(var(--pb-rgb-black));

  /* Secondary */
  --pb-brand-secondary: var(--pb-surface);
  --pb-brand-secondary-hover: var(--pb-surface-hover);
  --pb-brand-secondary-border: var(--pb-border);
  --pb-brand-on-secondary: var(--pb-text-primary);

  /* Ghost */
  --pb-brand-ghost: transparent;
  --pb-brand-ghost-hover: var(--pb-surface);
  --pb-brand-on-ghost: var(--pb-text-primary);

  /* Danger */
  --pb-danger: var(--pb-error);
  --pb-danger-hover: var(--pb-error);
  --pb-danger-soft: var(--pb-error-soft);
  --pb-danger-border: var(--pb-error-border);
  --pb-on-danger: var(--pb-danger-contrast);

  /* Warning (soft/border stay defined in effect colors above) */
  --pb-warning-base: var(--pb-warning);
  --pb-on-warning: var(--pb-warning-contrast);

  /* Success */
  --pb-success-base: var(--pb-success);
  --pb-on-success: var(--pb-success-contrast);

  /* Info */
  --pb-info-base: var(--pb-info);
  --pb-on-info: var(--pb-text-primary);

  /* Disabled */
  --pb-disabled-bg: var(--pb-surface);
  --pb-disabled-text: var(--pb-text-muted);

  /* Focus */
  --pb-focus-ring-color: var(--pb-accent);
}

/* ==========================================================================
   COMPONENT TOKENS — Usage-specific tokens
   ========================================================================== */
:root {
  /* Typography */
  --pb-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pb-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --pb-fs-caption: 12px;
  --pb-fs-small: 14px;
  --pb-fs-label: 14px;
  --pb-fs-body: 16px;
  --pb-fs-button: 15px;
  --pb-fs-h3: 24px;
  --pb-fs-h2: 32px;
  --pb-fs-h1: 48px;
  --pb-fs-hero: 56px;

  --pb-fs-h1-mobile: 38px;
  --pb-fs-hero-mobile: 40px;

  --pb-lh-body: 1.5;
  --pb-lh-heading: 1.2;

  --pb-fw-normal: 400;
  --pb-fw-medium: 500;
  --pb-fw-semibold: 600;
  --pb-fw-bold: 700;

  --pb-ls-heading: -0.02em;

  /* Spacing scale */
  --pb-space-1: 4px;
  --pb-space-2: 8px;
  --pb-space-3: 12px;
  --pb-space-4: 16px;
  --pb-space-5: 20px;
  --pb-space-6: 24px;
  --pb-space-8: 32px;
  --pb-space-10: 40px;
  --pb-space-12: 48px;
  --pb-space-16: 64px;
  --pb-space-20: 80px;
  --pb-space-24: 96px;

  /* Radius */
  --pb-radius-sm: 8px;
  --pb-radius-md: 12px;
  --pb-radius-lg: 16px;
  --pb-radius-xl: 20px;
  --pb-radius-full: 999px;

  /* Buttons */
  --pb-btn-height-sm: 36px;
  --pb-btn-height-md: 44px;
  --pb-btn-height-lg: 52px;
  --pb-btn-padding-x-sm: 12px;
  --pb-btn-padding-x-md: 16px;
  --pb-btn-padding-x-lg: 24px;

  /* Card */
  --pb-card-bg: var(--pb-surface);
  --pb-card-border: var(--pb-border);
  --pb-card-shadow: var(--pb-shadow-md);
  --pb-card-radius: var(--pb-radius-lg);
  --pb-card-padding: var(--pb-space-5);
  --pb-card-hover-shadow: var(--pb-shadow-lg);
  --pb-card-active-bg: var(--pb-accent-soft);
  --pb-card-active-border: var(--pb-accent-border);

  /* Input */
  --pb-input-bg: var(--pb-surface);
  --pb-input-border: var(--pb-border);
  --pb-input-border-hover: var(--pb-border-hover);
  --pb-input-border-focus: var(--pb-accent);
  --pb-input-text: var(--pb-text-primary);
  --pb-input-placeholder: var(--pb-text-muted);
  --pb-input-radius: var(--pb-radius-sm);
  --pb-input-height: var(--pb-btn-height-md);
  --pb-input-padding-x: var(--pb-space-3);
  --pb-input-font-size: var(--pb-fs-body);

  /* Navigation */
  --pb-nav-bg: var(--pb-surface);
  --pb-nav-border: var(--pb-border);
  --pb-nav-link-hover: var(--pb-bg);
  --pb-nav-link-active-bg: var(--pb-accent);
  --pb-nav-link-active-text: var(--pb-brand-on-primary);

  /* Header */
  --pb-header-bg: var(--pb-surface);
  --pb-header-border: var(--pb-border);
  --pb-header-height: 64px;

  /* Mobile header */
  --pb-mobile-header-height: 56px;

  /* Footer */
  --pb-footer-bg: var(--pb-bg);
  --pb-footer-border: var(--pb-border);

  /* Hero */
  --pb-hero-bg: var(--pb-bg);
  --pb-hero-padding-block: var(--pb-space-20);

  /* Section */
  --pb-section-padding-block: var(--pb-space-16);
  --pb-section-max-width: 1200px;

  /* Container */
  --pb-container-max-width: 1200px;
  --pb-container-padding-x: var(--pb-space-4);

  /* Badge */
  --pb-badge-radius: var(--pb-radius-full);
  --pb-badge-padding-x: var(--pb-space-3);
  --pb-badge-padding-y: var(--pb-space-1);
  --pb-badge-font-size: var(--pb-fs-caption);
  --pb-badge-font-weight: var(--pb-fw-semibold);

  /* Animation */
  --pb-transition-fast: 150ms ease;
  --pb-transition-normal: 200ms ease;
  --pb-transition-slow: 300ms ease;

  /* Background animation durations */
  --pb-bg-anim-slow: 18s;
  --pb-bg-anim-medium: 24s;
  --pb-bg-anim-slower: 32s;
  --pb-bg-anim-slowest: 40s;

  /* Z-index */
  --pb-z-dropdown: 100;
  --pb-z-sticky: 200;
  --pb-z-modal: 300;
  --pb-z-toast: 400;
  --pb-z-tooltip: 500;
}

/* ==========================================================================
   REDUCED MOTION — Respect user preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pb-transition-fast: 0ms;
    --pb-transition-normal: 0ms;
    --pb-transition-slow: 0ms;
    --pb-bg-anim-slow: 0s;
    --pb-bg-anim-medium: 0s;
    --pb-bg-anim-slower: 0s;
    --pb-bg-anim-slowest: 0s;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   LIGHT THEME OVERRIDES — applied whenever the theme is not explicitly dark.
   Mirrors the legacy --color-* behavior (theme.json lightColors in :root,
   darkColors under [data-theme="dark"]) so the toggle is OS-independent.
   The inline page script defaults to data-theme="dark", so the default
   presentation stays dark.
   ========================================================================== */
:root:not([data-theme="dark"]) {
    --pb-rgb-bg: 238 241 245;
    --pb-rgb-bg-secondary: 226 230 237;
    --pb-rgb-surface: 255 255 255;
    --pb-rgb-surface-hover: 241 245 249;
    --pb-rgb-border: 229 231 235;
    --pb-rgb-border-hover: 209 213 219;
    --pb-rgb-disabled-border: 229 231 235;
    --pb-rgb-text-primary: 26 29 33;
    --pb-rgb-text-secondary: 107 114 128;
    --pb-rgb-text-muted: 107 114 128;
    --pb-rgb-accent: 53 216 142;
    --pb-rgb-accent-strong: 43 197 127;
    --pb-rgb-accent-hover: 63 226 152;
    --pb-rgb-accent-active: 33 177 107;
}

/* Force dark theme when explicitly set */
:root[data-theme="dark"] {
  --pb-rgb-bg: 7 11 18;
  --pb-rgb-bg-secondary: 11 18 32;
  --pb-rgb-surface: 17 25 39;
  --pb-rgb-surface-hover: 22 34 53;
  --pb-rgb-border: 36 50 71;
  --pb-rgb-border-hover: 52 68 90;
  --pb-rgb-disabled-border: 26 37 51;
  --pb-rgb-text-primary: 244 247 251;
  --pb-rgb-text-secondary: 143 156 175;
  --pb-rgb-text-muted: 93 106 125;
  --pb-rgb-accent: 98 230 167;
  --pb-rgb-accent-strong: 53 216 142;
  --pb-rgb-accent-hover: 138 240 190;
  --pb-rgb-accent-active: 43 197 127;
}

/* ==========================================================================
   COMPATIBILITY ALIASES — Map --pb-* tokens to --color-* used by style.css
   ========================================================================== */
:root,
:root[data-theme="dark"] {
  --color-background: var(--pb-bg);
  --color-surface: var(--pb-surface);
  --color-card: var(--pb-card-bg);
  --color-text: var(--pb-text-primary);
  --color-muted: var(--pb-text-muted);
  --color-primary: var(--pb-brand-primary);
  --color-primary-contrast: var(--pb-brand-on-primary);
  --color-success: var(--pb-success-base);
  --color-success-contrast: var(--pb-on-success);
  --color-warning: var(--pb-warning-base);
  --color-warning-contrast: var(--pb-on-warning);
  --color-danger: var(--pb-danger);
  --color-danger-contrast: var(--pb-on-danger);
  --color-border: var(--pb-border);
  --color-background-alt: var(--pb-bg-secondary);
}