/* AIDEA Technology, colour tokens. Source: "AIDEA Brand Guidelines - Color Palette".
   Proportion rule: 60% Sky Blue / 30% Coral Orange / 10% Warm Yellow, on a pale sky page (sky-blue-50).
   Revised 2026-11-12: page moved from cream to sky-blue-50; dark steps (800/900) added so blue and
   coral pass WCAG AA (4.5:1) as text and as button fills with white text. Brand 500s are for fills,
   marks and large shapes, never for body-size text. Previous version:
   ~/vault/archive/design-system-palette-archived-2026-11-12/ */
:root{
/* Brand base */
--sky-blue:#5DB4E8;
--coral-orange:#E85A4F;
--warm-yellow:#F5D76E;
--neutral-cream:#F5F0E8;
--neutral-charcoal:#2D2D2D;

/* Tints + shades derived from the five base colours.
   Every hue uses the same steps: 50 100 200 300 500 600 700 800 (sky adds 900). */
--sky-blue-900:#155A85;
--sky-blue-800:#1C6FA3;
--sky-blue-700:#2E8CC4;
--sky-blue-600:#3F9FDA;
--sky-blue-500:#5DB4E8;
--sky-blue-300:#9FD3F1;
--sky-blue-200:#C6E4F7;
--sky-blue-100:#E3F2FC;
--sky-blue-50:#F5FAFE;
--coral-800:#962F28;
--coral-700:#B93F36;
--coral-600:#D24B41;
--coral-500:#E85A4F;
--coral-300:#F19A93;
--coral-200:#F7C2BD;
--coral-100:#FBE2E0;
--coral-50:#FEF4F3;
--yellow-800:#8A6A0E;
--yellow-700:#C9A227;
--yellow-600:#E4BF45;
--yellow-500:#F5D76E;
--yellow-300:#FAE7A8;
--yellow-200:#FCEFC6;
--yellow-100:#FDF6E1;
--yellow-50:#FEFBF0;
--cream-0:#FFFFFF;
--cream-50:#FBF9F5;
--cream-100:#F5F0E8;
--cream-200:#EBE4D9;
--cream-300:#DCD3C4;
--charcoal-900:#1A1A1A;
--charcoal-800:#2D2D2D;
--charcoal-600:#555555;
--charcoal-500:#6F6B66;
--charcoal-400:#8A8580;
--charcoal-200:#C9C4BD;

/* Semantic, surface */
--surface-page:var(--sky-blue-50);
--surface-raised:#FFFFFF;
--surface-card:#FFFFFF;
--surface-warm:var(--cream-100);          /* cream panels: quotes, imagery frames, editorial moments */
--surface-inverse:var(--charcoal-800);
--surface-brand:var(--sky-blue-500);
--surface-brand-soft:var(--sky-blue-100);
--surface-accent:var(--yellow-500);
--surface-accent-soft:var(--yellow-100);
--surface-alert:var(--coral-500);         /* brand coral fill, decorative highlight */
--surface-alert-soft:var(--coral-100);
--surface-danger:var(--coral-700);        /* errors and destructive states, always with an icon + words */
--surface-danger-soft:var(--coral-50);

/* Semantic, text (all pass 4.5:1 on the page) */
--text-heading:var(--charcoal-900);
--text-body:var(--charcoal-800);
--text-muted:var(--charcoal-600);
--text-subtle:var(--charcoal-500);        /* was charcoal-400 (3.5:1, failed) */
--text-brand:var(--sky-blue-800);         /* was sky-blue-500 (2.2:1, failed) */
--text-brand-strong:var(--sky-blue-900);
--text-on-brand:#FFFFFF;                  /* use on --action-primary; on --surface-brand use --text-heading */
--text-on-inverse:var(--cream-100);
--text-alert:var(--coral-800);            /* was coral-600 (4.1:1, failed); passes on coral-100 too */
--text-accent:var(--yellow-800);

/* Semantic, line */
--border-hairline:rgba(45,45,45,.12);
--border-soft:var(--sky-blue-200);        /* was cream-200, read muddy on the blue page */
--border-strong:var(--charcoal-800);
--border-brand:var(--sky-blue-500);
--rule-accent:var(--sky-blue-500);

/* Interaction (white text on every fill passes 4.5:1) */
--action-primary:var(--sky-blue-800);
--action-primary-hover:var(--sky-blue-900);
--action-primary-active:var(--sky-blue-900);
--action-danger:var(--coral-700);
--action-danger-hover:var(--coral-800);
--focus-ring:0 0 0 3px rgba(93,180,232,.45);

/* Marks + devices */
--mark-blue:var(--sky-blue-500);
--mark-ghost:rgba(93,180,232,.16);
--highlight-stroke:var(--sky-blue-500);
}