/**
 * PixelClean Design System Tokens
 * Canonical CSS custom properties derived from W3C DTCG tokens.json
 * Namespace: --pc-*
 */

:root {
  /* Brand Accents */
  --pc-emerald: #10b981;
  --pc-emerald-strong: #059669;
  --pc-emerald-soft: rgba(16, 185, 129, 0.12);
  --pc-emerald-border: rgba(16, 185, 129, 0.28);
  --pc-cyan: #06b6d4;

  /* Surfaces & Canvas */
  --pc-ink: #0b0f14;
  --pc-ink-card: #121820;
  --pc-ink-border: rgba(255, 255, 255, 0.08);
  --pc-slate: #0f172a;
  --pc-text: #0f172a;
  --pc-text-dark: #f1f5f9;
  --pc-muted: #64748b;
  --pc-muted-dark: #94a3b8;
  --pc-surface: #ffffff;
  --pc-surface-soft: #f8fafc;
  --pc-border: #e2e8f0;

  /* Corner Radii */
  --pc-radius-sm: 8px;
  --pc-radius-md: 12px;
  --pc-radius-lg: 18px;
  --pc-radius-pill: 999px;

  /* Typography Stacks */
  --pc-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pc-font-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --pc-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, monospace;

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

  /* Elevation & Glows */
  --pc-glow: 0 0 20px rgba(16, 185, 129, 0.22);
  --pc-glow-strong: 0 0 32px rgba(16, 185, 129, 0.38);
  --pc-card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);

  /* Gradients */
  --pc-grad-primary: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --pc-grad-ink: linear-gradient(180deg, #0b0f14 0%, #071019 100%);

  /* Motion */
  --pc-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --pc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pc-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --pc-transition-base: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --pc-transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}