:root{
/* ---- Core palette (Brand Guidelines v1.0, section 04) ---- */
--kw-blue:#00AEEF;          /* Kilowattic Blue - accent, links, charts, "the charge" */
--kw-deep-blue:#002255;     /* Deep Blue - dominant, dark panels, covers */
--kw-sky-blue:#3B82F6;      /* Sky Blue - secondary, gradients, UI states */
--kw-charcoal:#0F172A;      /* Charcoal - text, wordmark, mono mark */
--kw-soft-grey:#E5E7EB;     /* Soft Grey - rules, borders, dividers */
--kw-white:#FFFFFF;         /* Page ground */
--kw-mist:#F3F5F9;          /* Light tint ground (logo background rules, section 03) */
--kw-slate:#64748B;         /* Chart context / secondary text (section 08) */

/* ---- Permitted tints. Deep Blue and Charcoal at 10% and 5% only. No other tints. ---- */
--kw-deep-blue-10:rgba(0,34,85,.10);
--kw-deep-blue-05:rgba(0,34,85,.05);
--kw-charcoal-10:rgba(15,23,42,.10);
--kw-charcoal-05:rgba(15,23,42,.05);
--kw-blue-10:rgba(0,174,239,.10);   /* accent wash for chips and hover only */

/* ---- Indicators (section 08) ---- */
--kw-positive:#1FBE6B;
--kw-negative:#E2553B;
--kw-caution:#F59E0B;

/* ---- Chart series, in order ---- */
--chart-1:var(--kw-blue);
--chart-2:var(--kw-deep-blue);
--chart-3:var(--kw-sky-blue);
--chart-context:var(--kw-slate);
--chart-grid:var(--kw-soft-grey);
--chart-forecast:var(--kw-sky-blue);

/* ---- The only gradient in the brand: the mark, top-left to bottom-right ---- */
--gradient-mark:linear-gradient(135deg,#00AEEF 0%,#002255 100%); /* @kind color */
/* App icon / favicon tile: Deep Blue to Sky Blue */
--gradient-tile:linear-gradient(135deg,#002255 0%,#3B82F6 100%); /* @kind color */
/* Protection gradient for type over photography */
--gradient-protect:linear-gradient(90deg,rgba(0,34,85,.92) 0%,rgba(0,34,85,.72) 45%,rgba(0,34,85,0) 100%); /* @kind color */
--gradient-protect-bottom:linear-gradient(180deg,rgba(0,34,85,0) 0%,rgba(0,34,85,.85) 100%); /* @kind color */

/* ---- Semantic aliases. Use these in components, not the raw palette. ---- */
--text-primary:var(--kw-charcoal);
--text-secondary:var(--kw-slate);
--text-heading:var(--kw-deep-blue);
--text-inverse:var(--kw-white);
--text-inverse-muted:rgba(255,255,255,.72);
--text-accent:var(--kw-deep-blue);     /* Kilowattic Blue fails AA for body: use Deep Blue */
--text-accent-large:var(--kw-blue);    /* permitted at 24px+ / bold 19px+ and for graphics */
--text-link:var(--kw-deep-blue);
--text-link-hover:var(--kw-blue);
--text-disabled:rgba(15,23,42,.38);

--surface-page:var(--kw-white);
--surface-muted:var(--kw-mist);
--surface-card:var(--kw-white);
--surface-card-muted:var(--kw-mist);
--surface-row-alt:var(--kw-deep-blue-05);
--surface-dark:var(--kw-deep-blue);
--surface-darkest:var(--kw-charcoal);
--surface-accent:var(--kw-blue);
--surface-accent-soft:var(--kw-blue-10);
--surface-inverse-panel:rgba(255,255,255,.06);

--border-default:var(--kw-soft-grey);
--border-strong:var(--kw-charcoal-10);
--border-accent:var(--kw-blue);
--border-inverse:rgba(255,255,255,.18);
--divider-rule:var(--kw-soft-grey);

--focus-ring:var(--kw-blue);
--focus-ring-inverse:var(--kw-white);
}