/* Colors — brand primaries are verbatim from the Design Manual 4.1.
   Neutrals and status colors are DERIVED (the manual defines only Growth, Vision, Black, White). */
:root{
/* --- Brand primaries (manual 4.1) --- */
--watt-growth:#e0fc15;        /* PANTONE 388 U — R224 G252 B21 */
--watt-vision:#96c2ff;        /* PANTONE 2717 U — R150 G194 B255 */
--watt-stability:#000000;     /* PANTONE Black U */
--watt-transparency:#ffffff;

/* --- Brand tints (derived: primary mixed toward white) --- */
--growth-100:#f8fedb;
--growth-200:#f0fdac;
--growth-400:#e0fc15;
--growth-600:#b9cf10;
--vision-100:#eaf3ff;
--vision-200:#d5e6ff;
--vision-400:#96c2ff;
--vision-600:#6f9ddb;

/* --- Neutrals (derived from Stability on Transparency) --- */
--neutral-0:#ffffff;
--neutral-50:#fafafa;
--neutral-100:#f2f2f2;
--neutral-200:#e6e6e6;
--neutral-300:#cccccc;
--neutral-400:#a6a6a6;
--neutral-500:#808080;
--neutral-600:#666666;
--neutral-700:#4d4d4d;
--neutral-800:#2e2e2e;
--neutral-900:#1a1a1a;
--neutral-1000:#000000;

/* --- Status (derived; not defined in the manual — see readme) --- */
--status-good:#e0fc15;
--status-info:#96c2ff;
--status-warn:#ffb020;
--status-critical:#e5484d;

/* --- Semantic: text --- */
--text-primary:var(--watt-stability);
--text-secondary:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-disabled:var(--neutral-400);
--text-inverse:var(--watt-transparency);
--text-on-accent:var(--watt-stability);
--text-link:var(--watt-stability);
--text-link-hover:var(--neutral-700);

/* --- Semantic: surface --- */
--surface-page:var(--watt-transparency);
--surface-card:var(--watt-transparency);
--surface-sunken:var(--neutral-100);
--surface-raised:var(--watt-transparency);
--surface-inverse:var(--watt-stability);
--surface-accent:var(--watt-growth);
--surface-accent-soft:var(--growth-100);
--surface-info-soft:var(--vision-100);
--surface-overlay:rgba(0,0,0,.56);
--surface-glass:rgba(255,255,255,.72);
--surface-glass-dark:rgba(0,0,0,.40);

/* --- Semantic: border --- */
--border-subtle:var(--neutral-200);
--border-default:var(--neutral-300);
--border-strong:var(--watt-stability);
--border-inverse:rgba(255,255,255,.18);
--border-on-glass:rgba(0,0,0,.10);

/* --- Interaction --- */
--focus-ring:var(--watt-vision);
--focus-ring-width:2px;
--focus-ring-offset:2px;
--overlay-hover:rgba(0,0,0,.06);
--overlay-press:rgba(0,0,0,.12);
--overlay-hover-inverse:rgba(255,255,255,.10);
--overlay-press-inverse:rgba(255,255,255,.18);
}