/**
 * pixel clean — Design System Tokens
 * Canonical CSS custom properties derived from official brand kit
 * Colors: Primary #000000 | Brand Blue #3B82F6 | Light Blue #EAF2FF | Surface #F5F7FA | Muted #6B7280 | Border #E5E7EB
 */

:root {
  /* Brand Core Palette */
  --pc-primary: #000000;
  --pc-brand-blue: #3B82F6;
  --pc-brand-blue-hover: #2563EB;
  --pc-brand-blue-light: #EAF2FF;
  --pc-brand-blue-focus: rgba(59, 130, 246, 0.25);
  --pc-brand-blue-overlay: rgba(59, 130, 246, 0.12);

  /* Accessible variant of Brand Blue.
     #3B82F6 scores 3.68:1 against white, and white-on-#3B82F6 is also 3.68:1.
     Both fail WCAG AA (4.5:1) for body text and Lighthouse flagged them
     (color-contrast, and link-in-text-block). #1D4ED8 is the same hue already
     used in the OG cover gradient and scores 6.70:1 on white.
     Use --pc-brand-blue-strong for text on light surfaces and for fills that
     carry white text. Keep --pc-brand-blue for logos, borders, accents, and
     anything on a dark surface, where it scores 4.4-5.7:1 and passes. */
  --pc-brand-blue-strong: #1D4ED8;
  --pc-brand-blue-strong-hover: #1E40AF;

  /* Canvas & Surfaces */
  --pc-bg-page: #FFFFFF;
  --pc-surface: #FFFFFF;
  --pc-surface-secondary: #F5F7FA;
  --pc-surface-active: #EAF2FF;

  /* Typography Colors */
  --pc-text: #000000;
  --pc-text-secondary: #6B7280;
  --pc-text-muted: #9CA3AF;
  --pc-text-on-brand: #FFFFFF;

  /* Structural Borders */
  --pc-border: #E5E7EB;
  --pc-border-hover: #D1D5DB;
  --pc-border-focus: #3B82F6;

  /* Status Colors */
  --pc-success: #22C55E;
  --pc-success-bg: #F0FDF4;
  --pc-error: #EF4444;
  --pc-error-bg: #FEF2F2;

  /* Typography Stacks (Inter standard) */
  --pc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pc-font-body: var(--pc-font-sans);
  --pc-font-display: var(--pc-font-sans);
  --pc-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Typography Weights */
  --pc-weight-regular: 400;
  --pc-weight-medium: 500;
  --pc-weight-semibold: 600;
  --pc-weight-bold: 700;
  --pc-weight-extrabold: 800;

  /* Border Radii */
  --pc-radius-xs: 4px;
  --pc-radius-sm: 8px;
  --pc-radius-md: 10px;
  --pc-radius-lg: 16px;
  --pc-radius-xl: 20px;
  --pc-radius-pill: 9999px;

  /* Elevation & Shadows (Subtle, Apple/Linear style) */
  --pc-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 20px rgba(0, 0, 0, 0.04);
  --pc-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.07);
  --pc-shadow-card-elevated: 0 16px 40px rgba(0, 0, 0, 0.11);
  --pc-shadow-btn: 0 4px 14px rgba(59, 130, 246, 0.25);
  --pc-shadow-btn-hover: 0 6px 20px rgba(59, 130, 246, 0.35);

  /* Motion Timing */
  --pc-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --pc-transition-base: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --pc-transition-smooth: 300ms ease-out;

  /* Legacy Aliases for backwards compatibility */
  --pc-emerald: var(--pc-brand-blue);
  --pc-emerald-strong: var(--pc-brand-blue-hover);
  --pc-emerald-soft: var(--pc-brand-blue-light);
  --pc-emerald-border: rgba(59, 130, 246, 0.25);
  --pc-cyan: #38BDF8;
  --pc-surface-soft: var(--pc-surface-secondary);
  --pc-muted: var(--pc-text-secondary);
  --pc-muted-dark: #9CA3AF;
  --pc-slate: #000000;
}

/* Dark Mode Tokens */
[data-theme="dark"],
.dark {
  --pc-bg-page: #0B0D10;
  --pc-surface: #12161C;
  --pc-surface-secondary: #12161C;
  --pc-surface-active: #1B212B;
  --pc-text: #FFFFFF;
  --pc-text-secondary: #9CA3AF;
  --pc-text-muted: #6B7280;
  --pc-border: #252A32;
  --pc-border-hover: #374151;
  --pc-shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.35);
  --pc-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
  --pc-shadow-card-elevated: 0 16px 40px rgba(0, 0, 0, 0.6);
}