/*
 * Candu design tokens.
 *
 * Extracted verbatim from the Candu website bundle. Every colour, size and
 * duration in the product should come from here rather than a literal.
 * Dark theme switches on [data-theme="dark"] on the root element.
 */

:root{
--font-display:'Space Grotesk','Instrument Sans',system-ui,sans-serif;
--font-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
--text-xs:12px;--text-sm:13px;--text-base:15px;--text-md:17px;--text-lg:20px;--text-xl:24px;--text-2xl:30px;--text-3xl:38px;--text-4xl:48px;--text-5xl:60px;
--leading-tight:1.1;--leading-snug:1.3;--leading-normal:1.6;
--tracking-tight:-0.02em;--tracking-caps:0.08em;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
}

:root{
/* Navy — trust, intelligence (brand core #001F3F) */
--navy-950:#001226;--navy-900:#001F3F;--navy-800:#0A2E56;--navy-700:#14406F;--navy-600:#1F5389;--navy-500:#2E68A6;--navy-400:#5D8BBE;--navy-300:#8FAFD3;--navy-200:#BCCFE5;--navy-100:#DDE8F3;--navy-50:#EFF4FA;
--cobalt:#002395;
/* Teal — energy, crawl motion (brand core #00B2A9) */
--teal-900:#00332F;--teal-800:#004E48;--teal-700:#00665F;--teal-600:#008F87;--teal-500:#00B2A9;--teal-400:#2BC9C0;--teal-300:#6FDCD5;--teal-200:#A8EAE5;--teal-100:#D0F4F1;--teal-50:#E9FAF9;
/* SA accents — use sparingly (max 20–30%) */
--gold-700:#B37500;--gold-600:#E09E00;--gold-500:#FFB612;--gold-400:#FFC94D;--gold-300:#FFDC8A;--gold-100:#FFF3D6;
--green-700:#005C3A;--green-600:#007A4D;--green-500:#0E9463;--green-300:#7FD0AC;--green-100:#DCF3E8;
--orange-600:#D4541A;--orange-500:#F26B21;--orange-100:#FDE9DE;
--red-700:#9C1F28;--red-600:#C42B35;--red-500:#E05561;--red-100:#FBE3E4;
/* Neutrals — charcoal text, cool grays */
--neutral-950:#10151C;--neutral-900:#1A222C;--neutral-800:#2A3542;--neutral-700:#3D4A59;--neutral-600:#556475;--neutral-500:#6E7E8F;--neutral-400:#8C99A8;--neutral-300:#B0BAC6;--neutral-200:#D2D9E0;--neutral-100:#E7EBEF;--neutral-50:#F4F6F8;
/* Semantic — light theme */
--surface-page:#F7F9FA;--surface-card:#FFFFFF;--surface-sunken:#F0F3F5;--surface-raised:#FFFFFF;--surface-inverse:var(--navy-900);
--text-primary:#1A222C;--text-secondary:#3D4A59;--text-muted:#6E7E8F;--text-inverse:#F4F7FA;--text-on-accent:#001F3F;
--border-subtle:#E1E6EC;--border-strong:#B0BAC6;
--action-primary:var(--navy-900);--action-primary-hover:var(--navy-800);--action-primary-active:var(--navy-950);--on-action-primary:#FFFFFF;
--action-accent:var(--gold-500);--action-accent-hover:var(--gold-400);--action-accent-active:var(--gold-600);
--link:var(--teal-700);--link-hover:var(--teal-800);
--focus-ring:var(--teal-500);
--live:var(--teal-500);--live-bg:var(--teal-50);
--success:var(--green-600);--success-bg:var(--green-100);--warning:#8A5B00;--warning-bg:var(--gold-100);--danger:var(--red-600);--danger-bg:var(--red-100);--info:var(--navy-700);--info-bg:var(--navy-100);
--data-1:var(--teal-500);--data-2:var(--navy-500);--data-3:var(--gold-500);--data-4:var(--green-500);--data-5:var(--orange-500);
}

:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;
--radius-sm:5px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-pill:999px;
--border-w:1px;
}

:root{
--shadow-sm:0 1px 2px rgba(16,21,28,.06);
--shadow-md:0 4px 12px rgba(16,21,28,.08);
--shadow-lg:0 16px 40px rgba(16,21,28,.16);
--ring:0 0 0 3px rgba(0,178,169,.22);
--gradient-depth:linear-gradient(135deg,#001F3F,#002395);/* @kind other */
}

:root{
--dur-fast:120ms;/* @kind other */
--dur-base:180ms;/* @kind other */
--dur-slow:280ms;/* @kind other */
--ease-out:cubic-bezier(.2,.8,.3,1);/* @kind other */
--ease-in-out:cubic-bezier(.55,.06,.25,.95);/* @kind other */
}
@keyframes cdu-pulse{0%{box-shadow:0 0 0 0 rgba(0,178,169,.45)}70%{box-shadow:0 0 0 6px rgba(0,178,169,0)}100%{box-shadow:0 0 0 0 rgba(0,178,169,0)}}
@keyframes cdu-fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

[data-theme="dark"]{
--surface-page:#0A1420;--surface-card:#101E30;--surface-sunken:#060D16;--surface-raised:#16273C;--surface-inverse:#EDF2F7;
--text-primary:#E9F0F6;--text-secondary:#AEBECE;--text-muted:#7A8CA0;--text-inverse:#0A1420;--text-on-accent:#001F3F;
--border-subtle:#22334A;--border-strong:#3A5170;
--action-primary:var(--teal-400);--action-primary-hover:var(--teal-300);--action-primary-active:var(--teal-500);--on-action-primary:#001226;
--link:var(--teal-300);--link-hover:var(--teal-200);
--live-bg:#0A2E2C;
--success:#4CC998;--success-bg:#0B2A1E;--warning:var(--gold-400);--warning-bg:#2E2410;--danger:#F07C85;--danger-bg:#3A1418;--info:var(--navy-300);--info-bg:#12253C;
--shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow-md:0 4px 14px rgba(0,0,0,.45);--shadow-lg:0 16px 40px rgba(0,0,0,.55);
--ring:0 0 0 3px rgba(43,201,192,.28);
}

/* --- base elements and utilities --- */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);margin:0;text-wrap:pretty}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
code,kbd,pre{font-family:var(--font-mono)}
::selection{background:var(--teal-200);color:var(--navy-900)}
[data-theme="dark"] ::selection{background:var(--teal-800);color:#fff}
.u-mono-label{font-family:var(--font-mono);font-size:11px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.u-live-dot{display:inline-block;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--live);animation:cdu-pulse 2s var(--ease-out) infinite}