:root{
/* Base brand colours (canonical, from obala-brand-tokens.json) */
--obala-orange:#FF6A00;
--obala-charcoal:#111317;
--obala-off-white:#F6F6F4;
--obala-warm-grey:#E2DED9;
--obala-white:#FFFFFF;
/* Derived tints/shades (oklch-derived from the base palette; UI-only, not for logo artwork) */
--obala-orange-hover:#E85F00;
--obala-orange-active:#DA5A00; /* was #D05500 — recalculated so charcoal button text holds ≥4.5:1 while pressed (4.82:1) */
--obala-orange-strong:#B54B00; /* darkest interaction orange — supports white text (5.29:1) */
--obala-orange-tint:#FFE9DA;
--obala-charcoal-80:#3A3D42;
--obala-charcoal-60:#6B6E74;
--obala-charcoal-40:#9FA2A7;
--obala-warm-grey-dark:#CFC9C2;
/* Semantic aliases */
--surface-page:var(--obala-off-white);
--surface-card:var(--obala-white);
--surface-dark:var(--obala-charcoal);
--surface-muted:var(--obala-warm-grey);
--text-heading:var(--obala-charcoal);
--text-body:var(--obala-charcoal);
--text-secondary:var(--obala-charcoal-60);
--text-on-dark:var(--obala-white);
/* CONTRAST CORRECTION: white on #FF6A00 is 2.87:1 (fails AA). On-accent text is charcoal (6.48:1). White text is only approved on --accent-strong (#B54B00, 5.29:1). */
--text-on-accent:var(--obala-charcoal);
--text-on-accent-strong:var(--obala-white);
--text-primary:var(--obala-charcoal);
--text-placeholder:#6F6A64; /* 5.36:1 on white, 4.95:1 on off-white */
--text-disabled:var(--obala-charcoal-60);
--text-error:var(--obala-orange-strong); /* 5.29:1 on white — #D05500 was 4.22:1 */
--accent:var(--obala-orange);
--accent-hover:var(--obala-orange-hover);
--accent-active:var(--obala-orange-active);
--accent-strong:var(--obala-orange-strong);
/* Functional graphic accent — canonical orange is 2.87:1 on white and FAILS the 3:1 requirement for meaningful non-text graphics. This derived value (visibly Obala orange, 3.9:1 on white / 3.7:1 on off-white) is the ONLY approved orange for data lines, gauge arcs, active edges, status graphics. It is NOT a canonical brand colour and never appears in logo artwork. Dark theme remaps it back to #FF6A00 (6.5:1 on charcoal). */
--accent-graphic:#DA5A00;
--surface-subtle:#EFEDE8;
--surface-raised:var(--obala-white);
--surface-hover:var(--obala-warm-grey); /* neutral hover wash — themed (dark: #2A2E34) so text never sits light-on-light */
--surface-inverse:var(--obala-charcoal);
--surface-inverse-hover:var(--obala-charcoal-80);
--text-on-inverse:var(--obala-white); /* pairs with --surface-inverse in BOTH themes (dark: charcoal on off-white) */
--text-muted:var(--obala-charcoal-60);
--border-subtle:#EFEDE8;
--border-default:var(--obala-warm-grey); /* decorative dividers only */
--border-strong:var(--obala-warm-grey-dark); /* decorative; 1.64:1 on white — NOT for interactive boundaries */
--border-control:#8A857D; /* interactive control boundaries — 3.63:1 on white */
--border-error:var(--obala-orange-strong);
--focus-ring:#E85F00; /* was #FF6A00 (2.87:1 on white) — #E85F00 is 3.46:1; pair with 2px offset for a dual-ring gap */
--selection:var(--obala-orange-tint);
--overlay:rgba(17,19,23,.5);
}