/* tokens.css
 Design tokens and theme variables only.
 Load this file BEFORE components.css.
*/
/* --- Base (global) tokens --- */
:root {
 --focus-ring: var(--focus-ring-color);
 /* Base colors */
 --navy: #0B2748;
 --white: #FFFFFF;
 --orange-light: #FFB615;
 --orange-mid: #F1952B;
 --orange-dark: #F1713C;
 --blue-light: #82BBAE;
 --blue-mid: #0BB1BB;
 --blue-dark: #0069AC;
 /* Semantic backgrounds */
 --bg-page: #FFFFFF;
 --bg-surface: rgba(130,187,174,0.10);
 --bg-muted: rgba(0,105,172,0.06);
 --bg-accent: rgba(11,177,187,0.12);
 /* Semantic borders */
 --border-subtle: rgba(0,105,172,0.20);
 --border-strong: rgba(0,105,172,0.38);
 --border-accent-warm: #F1713C;
 --border-accent-cool: #0069AC;
 /* Semantic text */
 --text-default: #0B2748;
 --text-on-dark: #FFFFFF;
 /* Semantic highlights */
 --hl-warm-bg: rgba(255,182,21,0.35);
 --hl-warm-text: #0B2748;
 --hl-cool-bg: rgba(11,177,187,0.28);
 --hl-cool-text: #0B2748;
 --hl-inverse-bg: #0B2748;
 --hl-inverse-text: #FFFFFF;
 /* --- Buttons (shared) --- */
 --btn-radius: 8px;
 --btn-font-weight: 600;
 --btn-gap: 0.5rem;
 /* Focus ring (shared) */
 --focus-ring-color: var(--blue-dark);
 --focus-ring-offset: 2px;
 --focus-ring-width: 2px;
 /* Disabled (shared) */
 --btn-disabled-bg: rgba(11,39,72,0.08);
 --btn-disabled-text: rgba(11,39,72,0.38);
 --btn-disabled-border: rgba(11,39,72,0.12);
 /* Icon inside buttons */
 --btn-icon-color: currentColor; /* inherits text color */
 --btn-icon-opacity: 0.9;
 /* Elevation for filled buttons */
 --btn-shadow: 0 1px 0 rgba(11,39,72,0.10);
 --btn-shadow-active: inset 0 1px 0 rgba(11,39,72,0.15);
 /* Primary (filled, accent) */
 --btn-primary-bg: var(--orange-mid);
 --btn-primary-text: var(--text-default); /* navy on orange */
 --btn-primary-border: var(--orange-dark);
 --btn-primary-hover-bg: var(--orange-dark);
 --btn-primary-hover-text: var(--text-default);
 --btn-primary-active-bg: var(--orange-dark);
 --btn-primary-active-text: var(--text-default);
 --btn-primary-focus-ring: var(--border-accent-cool);
 /* Secondary (outline) */
 --btn-secondary-bg: transparent;
 --btn-secondary-text: var(--text-default);
 --btn-secondary-border: var(--border-strong);
 --btn-secondary-hover-bg: var(--bg-muted);
 --btn-secondary-hover-text: var(--text-default);
 --btn-secondary-active-bg: var(--bg-accent);
 --btn-secondary-active-text: var(--text-default);
 --btn-secondary-focus-ring: var(--border-accent-cool);
 /* Tertiary (filled, neutral surface) */
 --btn-tertiary-bg: var(--bg-surface);
 --btn-tertiary-text: var(--text-default);
 --btn-tertiary-border: var(--border-subtle);
 --btn-tertiary-hover-bg: var(--bg-muted);
 --btn-tertiary-hover-text: var(--text-default);
 --btn-tertiary-active-bg: var(--bg-accent);
 --btn-tertiary-active-text: var(--text-default);
 --btn-tertiary-focus-ring: var(--border-accent-cool);
 /* Ghost (text emphasis, minimal bg) */
 --btn-ghost-bg: transparent;
 --btn-ghost-text: var(--text-default);
 --btn-ghost-border: transparent;
 --btn-ghost-hover-bg: var(--bg-muted);
 --btn-ghost-hover-text: var(--text-default);
 --btn-ghost-active-bg: var(--bg-accent);
 --btn-ghost-active-text: var(--text-default);
 --btn-ghost-focus-ring: var(--border-accent-cool);
 /* Link (inline) */
 --btn-link-text: var(--blue-dark);
 --btn-link-hover-text: var(--blue-dark);
 --btn-link-active-text: var(--blue-dark);
 --btn-link-underline-color: currentColor;
 /* Status variants */
 --btn-success-bg: var(--blue-mid);
 --btn-success-text: var(--navy);
 --btn-success-border: var(--blue-dark);
 --btn-success-hover-bg: var(--blue-mid);
 --btn-success-hover-text: var(--navy);
 --btn-success-hover-border: var(--blue-dark);
 --btn-danger-bg: var(--orange-dark);
 --btn-danger-text: var(--text-default);
 --btn-danger-border: var(--orange-dark);
 --btn-danger-hover-bg: var(--orange-mid);
 --btn-danger-hover-text: var(--text-default);
 --btn-danger-hover-border: var(--orange-dark);
 /* Sizes */
 --btn-font-size-sm: 0.875rem; /* 14px */
 --btn-font-size-md: 0.9375rem; /* 15px */
 --btn-font-size-lg: 1rem; /* 16px */
 --btn-height-sm: 32px;
 --btn-height-md: 40px;
 --btn-height-lg: 48px;
 --btn-pad-x-sm: 10px;
 --btn-pad-x-md: 14px;
 --btn-pad-x-lg: 16px;
 --btn-pad-y-sm: 6px;
 --btn-pad-y-md: 10px;
 --btn-pad-y-lg: 12px;
 --btn-gap-sm: 0.375rem;
 --btn-gap-md: 0.5rem;
 --btn-gap-lg: 0.625rem;
 --btn-min-width: 40px;
 /* Compact variant */
 --btn-compact-height: 28px;
 --btn-compact-pad-x: 8px;
 --btn-compact-pad-y: 4px;
 --btn-compact-gap: 0.375rem;
 --btn-compact-font-size: 0.8125rem; /* 13px */
 /* Icon-only */
 --btn-icon-size-sm: 16px;
 --btn-icon-size-md: 18px;
 --btn-icon-size-lg: 20px;
 --btn-icon-only-size-sm: var(--btn-height-sm);
 --btn-icon-only-size-md: var(--btn-height-md);
 --btn-icon-only-size-lg: var(--btn-height-lg);
 --btn-icon-only-radius: var(--btn-radius); /* square-ish */
 --btn-icon-only-radius-round: 50%; /* circular */
}
/* --- Theme classes: override token values only --- */
/* LIGHT — WARM */
body.theme-light-warm {
 --bg-page: var(--white);
 --bg-surface: rgba(130,187,174,0.06);
 --bg-muted: rgba(11,39,72,0.03);
 --bg-accent: rgba(241,113,60,0.10);
 --border-subtle: rgba(11,39,72,0.15);
 --border-strong: rgba(11,39,72,0.35);
 --border-accent-warm: var(--orange-dark);
 --border-accent-cool: var(--blue-dark);
 --text-default: var(--navy);
 --focus-ring-color: var(--border-accent-cool);
 --focus-ring: var(--focus-ring-color);
 --btn-primary-bg: var(--orange-mid);
 --btn-primary-text: var(--text-default);
 --btn-primary-border: var(--orange-dark);
 --btn-primary-hover-bg: var(--orange-dark);
 --btn-primary-active-bg: var(--orange-dark);
 --btn-primary-focus-ring: var(--border-accent-cool);
 --btn-secondary-bg: transparent;
 --btn-secondary-text: var(--text-default);
 --btn-secondary-border: var(--border-strong);
 --btn-secondary-hover-bg: rgba(241,113,60,0.10);
 --btn-secondary-active-bg: var(--bg-accent);
 --btn-secondary-focus-ring: var(--border-accent-cool);
 --btn-tertiary-bg: var(--bg-surface);
 --btn-tertiary-text: var(--text-default);
 --btn-tertiary-border: var(--border-subtle);
 --btn-tertiary-hover-bg: rgba(241,113,60,0.08);
 --btn-tertiary-active-bg: var(--bg-accent);
 --btn-tertiary-focus-ring: var(--border-accent-cool);
 --btn-ghost-hover-bg: rgba(241,113,60,0.08);
 --btn-link-text: var(--blue-dark);
 --btn-link-hover-text: var(--blue-dark);
 --btn-link-active-text: var(--blue-dark);
}
/* LIGHT — COOL */
body.theme-light-cool {
 --bg-page: var(--white);
 --bg-surface: rgba(130,187,174,0.10);
 --bg-muted: rgba(11,39,72,0.03);
 --bg-accent: rgba(0,105,172,0.08);
 --border-subtle: rgba(11,39,72,0.10);
 --border-strong: rgba(11,39,72,0.25);
 --border-accent-warm: var(--orange-mid);
 --border-accent-cool: var(--blue-mid);
 --text-default: var(--navy);
 --focus-ring-color: var(--border-accent-warm);
 --focus-ring: var(--focus-ring-color);
 --btn-primary-bg: var(--blue-mid);
 --btn-primary-text: var(--text-default);
 --btn-primary-border: var(--blue-dark);
 --btn-primary-hover-bg: var(--blue-dark);
 --btn-primary-hover-text: var(--text-on-dark);
 --btn-primary-active-bg: var(--blue-dark);
 --btn-primary-active-text: var(--text-on-dark);
 --btn-primary-focus-ring: var(--border-accent-warm);
 --btn-secondary-hover-bg: var(--bg-muted);
 --btn-secondary-active-bg: var(--bg-accent);
 --btn-secondary-focus-ring: var(--border-accent-warm);
 --btn-tertiary-hover-bg: var(--bg-accent);
 --btn-tertiary-active-bg: var(--bg-accent);
 --btn-tertiary-focus-ring: var(--border-accent-warm);
 --btn-ghost-hover-bg: var(--bg-accent);
 --btn-link-text: var(--blue-dark);
 --btn-link-hover-text: var(--blue-dark);
 --btn-link-active-text: var(--blue-dark);
}
/* DARK — COOL */
body.theme-dark-cool {
 --bg-page: var(--navy);
 --bg-surface: rgba(11,177,187,0.12);
 --bg-muted: rgba(255,182,21,0.03);
 --bg-accent: rgba(0,105,172,0.10);
 --border-subtle: rgba(255,182,21,0.15);
 --border-strong: rgba(255,182,21,0.35);
 --border-accent-warm: var(--orange-light);
 --border-accent-cool: var(--blue-light);
 --text-default: var(--white);
 --focus-ring-color: var(--border-accent-warm);
 --focus-ring: var(--focus-ring-color);
 --btn-shadow: none;
 --btn-shadow-active: inset 0 1px 0 rgba(255,255,255,0.12);
 --btn-primary-bg: var(--blue-mid);
 --btn-primary-text: var(--navy);
 --btn-primary-border: var(--blue-dark);
 --btn-primary-hover-bg: var(--blue-dark);
 --btn-primary-hover-text: var(--text-on-dark);
 --btn-primary-active-bg: var(--blue-dark);
 --btn-primary-active-text: var(--text-on-dark);
 --btn-primary-focus-ring: var(--border-accent-warm);
 --btn-secondary-bg: transparent;
 --btn-secondary-text: var(--text-default);
 --btn-secondary-border: var(--border-strong);
 --btn-secondary-hover-bg: var(--bg-accent);
 --btn-secondary-active-bg: rgba(0,105,172,0.18);
 --btn-secondary-focus-ring: var(--border-accent-warm);
 --btn-tertiary-bg: var(--bg-surface);
 --btn-tertiary-text: var(--text-default);
 --btn-tertiary-border: var(--border-subtle);
 --btn-tertiary-hover-bg: var(--bg-accent);
 --btn-tertiary-active-bg: rgba(0,105,172,0.18);
 --btn-tertiary-focus-ring: var(--border-accent-warm);
 --btn-ghost-hover-bg: var(--bg-accent);
 --btn-link-text: var(--blue-light);
 --btn-link-hover-text: var(--blue-light);
 --btn-link-active-text: var(--blue-light);
 --btn-disabled-bg: rgba(255,255,255,0.10);
 --btn-disabled-text: rgba(255,255,255,0.50);
 --btn-disabled-border: rgba(255,255,255,0.18);
}
/* LIGHT — NEUTRAL */
body.theme-neutral {
 --bg-page: #F7F9FA;
 --bg-surface: rgba(130,187,174,0.10);
 --bg-muted: rgba(11,39,72,0.03);
 --bg-accent: rgba(241,113,60,0.08);
 --border-subtle: rgba(11,39,72,0.10);
 --border-strong: rgba(11,39,72,0.25);
 --border-accent-warm: var(--orange-mid);
 --border-accent-cool: var(--blue-mid);
 --text-default: var(--navy);
 --focus-ring-color: var(--border-accent-warm);
 --focus-ring: var(--focus-ring-color);
 --btn-primary-bg: var(--blue-mid);
 --btn-primary-text: var(--text-default);
 --btn-primary-border: var(--blue-dark);
 --btn-primary-hover-bg: var(--blue-dark);
 --btn-primary-hover-text: var(--text-on-dark);
 --btn-primary-active-bg: var(--blue-dark);
 --btn-primary-active-text: var(--text-on-dark);
 --btn-primary-focus-ring: var(--border-accent-warm);
 --btn-secondary-hover-bg: var(--bg-muted);
 --btn-secondary-active-bg: rgba(0,105,172,0.08);
 --btn-secondary-focus-ring: var(--border-accent-warm);
 --btn-tertiary-hover-bg: rgba(0,105,172,0.08);
 --btn-tertiary-active-bg: rgba(0,105,172,0.10);
 --btn-tertiary-focus-ring: var(--border-accent-warm);
 --btn-ghost-hover-bg: rgba(0,105,172,0.08);
 --btn-link-text: var(--blue-dark);
 --btn-link-hover-text: var(--blue-dark);
 --btn-link-active-text: var(--blue-dark);
}
/* HIGH CONTRAST */
body.theme-high-contrast {
 --bg-page: var(--white);
 --bg-surface: rgba(11,39,72,0.10);
 --bg-muted: rgba(0,0,0,0.05);
 --bg-accent: rgba(0,105,172,0.12);
 --border-subtle: rgba(0,0,0,0.20);
 --border-strong: rgba(0,0,0,0.50);
 --border-accent-warm: var(--orange-dark);
 --border-accent-cool: var(--blue-dark);
 --text-default: var(--navy);
 --focus-ring-color: var(--border-accent-cool);
 --focus-ring: var(--focus-ring-color);
 --focus-ring-width: 3px;
 --focus-ring-offset: 0;
 --btn-shadow: none;
 --btn-primary-bg: var(--blue-dark);
 --btn-primary-text: var(--text-on-dark);
 --btn-primary-border: #000000;
 --btn-primary-hover-bg: var(--blue-dark);
 --btn-primary-active-bg: var(--blue-dark);
 --btn-primary-focus-ring: var(--border-accent-cool);
 --btn-secondary-bg: #FFFFFF;
 --btn-secondary-text: var(--navy);
 --btn-secondary-border: #000000;
 --btn-secondary-hover-bg: rgba(0,0,0,0.10);
 --btn-secondary-active-bg: rgba(0,0,0,0.18);
 --btn-secondary-focus-ring: var(--border-accent-cool);
 --btn-tertiary-bg: var(--bg-surface);
 --btn-tertiary-text: var(--text-default);
 --btn-tertiary-border: #000000;
 --btn-tertiary-hover-bg: rgba(0,0,0,0.08);
 --btn-tertiary-active-bg: rgba(0,0,0,0.12);
 --btn-tertiary-focus-ring: var(--border-accent-cool);
 --btn-ghost-text: var(--blue-dark);
 --btn-ghost-hover-bg: rgba(0,0,0,0.06);
 --btn-ghost-active-bg: rgba(0,0,0,0.10);
 --btn-ghost-focus-ring: var(--border-accent-cool);
 --btn-link-text: var(--blue-dark);
 --btn-link-hover-text: var(--blue-dark);
 --btn-link-active-text: var(--blue-dark);
 --btn-disabled-bg: rgba(0,0,0,0.08);
 --btn-disabled-text: rgba(0,0,0,0.65);
 --btn-disabled-border: rgba(0,0,0,0.30);
}
/* DARK — NAVY */
body.theme-navy {
 --bg-page: var(--navy);
 --bg-surface: rgba(255,255,255,0.06);
 --bg-muted: rgba(255,255,255,0.04);
 --bg-accent: rgba(11,177,187,0.18);
 --border-subtle: rgba(255,255,255,0.14);
 --border-strong: rgba(255,255,255,0.28);
 --border-accent-warm: var(--orange-mid);
 --border-accent-cool: var(--blue-mid);
 --text-default: var(--white);
 --focus-ring-color: var(--border-accent-warm);
 --focus-ring: var(--focus-ring-color);
 --btn-shadow: none;
 --btn-shadow-active: inset 0 1px 0 rgba(255,255,255,0.12);
 --btn-primary-bg: var(--orange-mid);
 --btn-primary-text: var(--navy);
 --btn-primary-border: var(--orange-dark);
 --btn-primary-hover-bg: var(--orange-dark);
 --btn-primary-active-bg: var(--orange-dark);
 --btn-primary-focus-ring: var(--border-accent-cool);
 --btn-secondary-hover-bg: var(--bg-accent);
 --btn-secondary-active-bg: rgba(11,177,187,0.24);
 --btn-secondary-focus-ring: var(--border-accent-warm);
 --btn-tertiary-hover-bg: var(--bg-accent);
 --btn-tertiary-active-bg: rgba(11,177,187,0.24);
 --btn-tertiary-focus-ring: var(--border-accent-warm);
 --btn-ghost-hover-bg: var(--bg-accent);
 --btn-link-text: var(--blue-light);
 --btn-link-hover-text: var(--blue-light);
 --btn-link-active-text: var(--blue-light);
 --btn-disabled-bg: rgba(255,255,255,0.10);
 --btn-disabled-text: rgba(255,255,255,0.50);
 --btn-disabled-border: rgba(255,255,255,0.18);
}
/* TEAL SURFACE (white cards on teal page) */
body.theme-teal-surface {
 --bg-page: var(--blue-light);
 --bg-surface: var(--white);
 --bg-muted: rgba(255,255,255,0.65);
 --bg-accent: rgba(241,149,43,0.18);
 --border-subtle: rgba(11,39,72,0.18);
 --border-strong: rgba(11,39,72,0.42);
 --border-accent-warm: var(--orange-dark);
 --border-accent-cool: var(--blue-dark);
 --text-default: var(--navy);
 --focus-ring-color: var(--border-accent-cool);
 --focus-ring: var(--focus-ring-color);
 --btn-primary-bg: var(--orange-mid);
 --btn-primary-text: var(--navy);
 --btn-primary-border: var(--orange-dark);
 --btn-primary-hover-bg: var(--orange-dark);
 --btn-primary-active-bg: var(--orange-dark);
 --btn-primary-focus-ring: var(--border-accent-cool);
 --btn-secondary-bg: transparent;
 --btn-secondary-text: var(--text-default);
 --btn-secondary-border: var(--border-strong);
 --btn-secondary-hover-bg: rgba(241,149,43,0.14);
 --btn-secondary-active-bg: var(--bg-accent);
 --btn-secondary-focus-ring: var(--border-accent-cool);
 --btn-tertiary-bg: var(--bg-surface);
 --btn-tertiary-text: var(--text-default);
 --btn-tertiary-border: var(--border-subtle);
 --btn-tertiary-hover-bg: rgba(241,149,43,0.12);
 --btn-tertiary-active-bg: var(--bg-accent);
 --btn-tertiary-focus-ring: var(--border-accent-cool);
 --btn-ghost-hover-bg: rgba(241,149,43,0.12);
 --btn-link-text: var(--navy);
 --btn-link-hover-text: var(--navy);
 --btn-link-active-text: var(--navy);
}