:root {
  /* ==================================================
     Primitive colors
     ================================================== */
  --color-dark: #050B2C;
  --color-accent: #00F0D7;
  --color-accent-hover: #00D8C2;
  --color-accent-active: #00C4B2;
  --color-white: #FFFFFF;

  /* ==================================================
     Text colors
     ================================================== */
  --text-light-primary: #050B2C;
  --text-light-secondary: rgba(5, 11, 44, 0.92);
  --text-light-muted: rgba(5, 11, 44, 0.68);

  --text-light-accent: #006F78;
  --text-light-accent-hover: #006F78;

  --text-dark-primary: #FFFFFF;
  --text-dark-secondary: rgba(255, 255, 255, 0.82);
  --text-dark-disabled: rgba(255, 255, 255, 0.38);
  --text-dark-accent: var(--color-accent);
  --text-dark-accent-hover: var(--color-accent-hover);

  /* ==================================================
     Background / surface
     ================================================== */
  --bg-page: #F1F3F8;
  --bg-surface: #FFFFFF;
  --bg-dark: #050B2C;
  --bg-dark-surface: rgba(255, 255, 255, 0.06);

  /* ==================================================
     Reusable role colors
     ================================================== */
  --bg-hover-light: rgba(5, 11, 44, 0.06);
  --bg-active-light: rgba(5, 11, 44, 0.10);

  --bg-hover-dark: rgba(255, 255, 255, 0.06);
  --bg-active-dark: rgba(255, 255, 255, 0.10);

  /* ==================================================
     Border
     ================================================== */
  --border-default: rgba(5, 11, 44, 0.10);
  --border-light: rgba(5, 11, 44, 0.07);
  --border-button-light: rgba(5, 11, 44, 0.12);
  --border-strong: rgba(5, 11, 44, 0.16);

  --border-dark: rgba(255, 255, 255, 0.12);
  --border-dark-strong: rgba(255, 255, 255, 0.18);

  /* ==================================================
     Accent soft
     ================================================== */
  --accent-soft-bg: rgba(0, 216, 194, 0.10);
  --accent-soft-border: var(--color-accent-hover);
  --accent-soft-active-border: var(--color-accent-active);

  /* Accent tint surface — soft accent bg for hover/active/badge states */
  --text-light-accent-hover-bg: var(--accent-soft-bg);
  --text-light-accent-hover-border: var(--accent-soft-border);

  /* ==================================================
     Overlay / glass
     ================================================== */
  --overlay-scrim: rgba(5, 11, 44, 0.42);
  --glass-surface-bg: rgba(255, 255, 255, 0.72);
  --glass-surface-border: rgba(255, 255, 255, 0.42);

  /* RGB component tokens for rgba() multi-value patterns */
  --neutral-rgb: 5, 11, 44;
  --accent-hover-rgb: 0, 216, 194;

  /* ==================================================
     Semantic colors
     ================================================== */
  --color-success: #16A34A;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;

  --color-error: #B91C1C;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;

  --color-warning: #D97706;
  --color-info: #2563EB;

  /* Status badge palette — for compact badge components only */
  --status-badge-green-bg: #d1fae5;
  --status-badge-green-text: #059669;
  --status-badge-teal-bg: #ccfbf1;
  --status-badge-teal-text: #0d9488;

  /* ==================================================
     Typography
     ================================================== */
  --font-sans: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: var(--font-sans);
  --font-control: var(--font-sans);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-heading: 1.2;
  --line-height-body: 1.55;
  --line-height-control: 1.2;

  /* ==================================================
     Radius
     ================================================== */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ==================================================
     Shadow
     ================================================== */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(5, 11, 44, 0.06);
  --shadow-md: 0 8px 24px rgba(5, 11, 44, 0.08);
  --shadow-lg: 0 18px 48px rgba(5, 11, 44, 0.12);
  --shadow-accent: 0 8px 24px rgba(0, 240, 215, 0.18);
  --shadow-control-float-sm: 0 8px 18px rgba(0, 0, 0, 0.10);
  --shadow-control-float-md: 0 12px 28px -6px rgba(0, 0, 0, 0.16);

  /* ==================================================
     Blur / glass
     ================================================== */
  --blur-glass-sm: blur(8px);
  --blur-glass-md: blur(14px);
  --blur-glass-lg: blur(20px);

  /* ==================================================
     Z-index / layers
     ================================================== */
  --layer-base: 0;
  --layer-sticky: 20;
  --layer-header: 40;
  --layer-sidebar: 45;
  --layer-drawer: 60;
  --layer-backdrop: 70;
  --layer-modal: 80;
  --layer-toast: 90;

  /* ==================================================
     Focus
     ================================================== */
  --focus-ring: 0 0 0 3px rgba(0, 240, 215, 0.32);

  /* ==================================================
     Motion
     ================================================== */
  --duration-fast: 100ms;
  --duration-base: 160ms;
  --duration-slow: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* ==================================================
     Control size scale
     ================================================== */

  /* micro: app hub link / small link pill */
  --control-size-micro-py: 6px;
  --control-size-micro-px: 8px;
  --control-size-micro-gap: 6px;
  --control-size-micro-font: 13px;
  --control-size-micro-icon: 18px;
  --control-size-micro-radius: var(--radius-sm);

  /* compact: compact action button */
  --control-size-compact-py: 8px;
  --control-size-compact-px: 10px;
  --control-size-compact-gap: 8px;
  --control-size-compact-font: 12px;
  --control-size-compact-icon: 17px;
  --control-size-compact-radius: var(--radius-md);

  /* nav-row: sidebar row */
  --control-size-nav-row-height: 34px;
  --control-size-nav-row-py: 5px;
  --control-size-nav-row-px: 5px;
  --control-size-nav-row-gap: 8px;
  --control-size-nav-row-font: 12px;
  --control-size-nav-row-icon: 17px;
  --control-size-nav-row-radius: 7px;

  /* sm: header action */
  --control-size-sm-height: 38px;
  --control-size-sm-px: 16px;
  --control-size-sm-gap: 6px;
  --control-size-sm-font: 13px;
  --control-size-sm-icon: 16px;
  --control-size-sm-radius: var(--radius-sm);

  /* sm mobile adjustment */
  --control-size-sm-mobile-height: 36px;
  --control-size-sm-mobile-px: 10px;
  --control-size-sm-mobile-gap: 4px;
  --control-size-sm-mobile-font: 12px;
  --control-size-sm-mobile-icon: 14px;

  /* md: app standard button */
  --control-size-md-height: 44px;
  --control-size-md-py: 11px;
  --control-size-md-px: 20px;
  --control-size-md-gap: 8px;
  --control-size-md-font: 13px;
  --control-size-md-radius: var(--radius-md);

  /* lg: landing CTA */
  --control-size-lg-py: 13px;
  --control-size-lg-px: 26px;
  --control-size-lg-gap: 8px;
  --control-size-lg-font: 14px;
  --control-size-lg-icon: 17px;
  --control-size-lg-radius: var(--radius-sm);

  /* xl: large CTA */
  --control-size-xl-height: 52px;
  --control-size-xl-py: 14px;
  --control-size-xl-px: 24px;
  --control-size-xl-gap: 8px;
  --control-size-xl-font: 15px;
  --control-size-xl-radius: var(--radius-md);

  /* icon-only */
  --control-size-icon: 40px;
  --control-size-icon-sm: 36px;

  /* ==================================================
     Control common
     ================================================== */
  --control-font-weight: var(--font-weight-semibold);
  --control-font-weight-strong: var(--font-weight-bold);

  --control-transition:
    background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);

  /* ==================================================
     Primary button
     ================================================== */
  --button-primary-bg: var(--color-accent);
  --button-primary-text: var(--color-dark);
  --button-primary-border: transparent;
  --button-primary-hover-bg: var(--color-accent-hover);
  --button-primary-active-bg: var(--color-accent-active);
  --button-primary-shadow: var(--shadow-accent);

  /* ==================================================
     Secondary button
     ================================================== */
  --button-secondary-bg: var(--bg-surface);
  --button-secondary-text: var(--color-dark);
  --button-secondary-border: var(--border-button-light);
  --button-secondary-hover-bg: var(--bg-page);
  --button-secondary-hover-border: var(--border-strong);
  --button-secondary-active-bg: var(--bg-active-light);

  /* ==================================================
     Ghost button
     ================================================== */
  --button-ghost-bg: transparent;
  --button-ghost-text: var(--text-light-primary);
  --button-ghost-border: transparent;
  --button-ghost-hover-bg: var(--bg-hover-light);
  --button-ghost-active-bg: var(--bg-active-light);

  /* ==================================================
     Icon button
     ================================================== */
  --icon-button-bg: var(--bg-surface);
  --icon-button-text: var(--color-dark);
  --icon-button-border: var(--border-button-light);
  --icon-button-hover-bg: var(--bg-page);
  --icon-button-hover-border: var(--border-strong);
  --icon-button-active-bg: var(--bg-active-light);

  --icon-button-dark-bg: var(--bg-hover-dark);
  --icon-button-dark-text: var(--text-dark-primary);
  --icon-button-dark-border: var(--border-dark);
  --icon-button-dark-hover-bg: var(--bg-active-dark);
  --icon-button-dark-hover-text: var(--color-accent);
  --icon-button-dark-hover-border: var(--border-dark-strong);

  /* ==================================================
     Text link
     ================================================== */
  --link-text: var(--text-light-accent);
  --link-hover-text: var(--text-light-accent-hover);
  --link-hover-bg: var(--accent-soft-bg);
  --link-hover-decoration: var(--color-accent-hover);
  --link-active-decoration: var(--color-accent-active);

  --link-dark-text: var(--text-dark-accent);
  --link-dark-hover-text: var(--text-dark-accent-hover);
  --link-dark-active-text: var(--color-accent-active);

  /* ==================================================
     Nav item — light background
     ================================================== */
  --nav-item-text: var(--text-light-secondary);
  --nav-item-hover-text: var(--text-light-primary);
  --nav-item-hover-bg: var(--bg-hover-light);
  --nav-item-active-bg: var(--accent-soft-bg);
  --nav-item-active-text: var(--text-light-accent);

  /* ==================================================
     Nav item — dark / sidebar
     ================================================== */
  --nav-dark-item-text: var(--text-dark-secondary);
  --nav-dark-item-hover-text: var(--text-dark-primary);
  --nav-dark-item-hover-bg: var(--bg-hover-dark);
  --nav-dark-item-active-bg: var(--color-accent);
  --nav-dark-item-active-text: var(--color-dark);
  --nav-dark-item-active-hover-bg: var(--color-accent-hover);
  --nav-dark-item-disabled-text: var(--text-dark-disabled);

  /* ==================================================
     Toggle / disclosure
     ================================================== */
  --toggle-bg: var(--bg-surface);
  --toggle-text: var(--color-dark);
  --toggle-border: var(--border-default);
  --toggle-hover-bg: var(--bg-page);
  --toggle-hover-border: var(--border-strong);
  --toggle-open-bg: var(--accent-soft-bg);
  --toggle-open-text: var(--color-dark);
  --toggle-open-border: var(--accent-soft-border);

  --toggle-dark-bg: transparent;
  --toggle-dark-text: var(--text-dark-secondary);
  --toggle-dark-hover-bg: var(--bg-hover-dark);
  --toggle-dark-hover-text: var(--text-dark-primary);
  --toggle-dark-open-bg: var(--accent-soft-bg);
  --toggle-dark-open-text: var(--color-accent);

  /* ==================================================
     Badge non-click
     ================================================== */
  --badge-bg: var(--color-accent);
  --badge-text: var(--color-dark);
  --badge-border: transparent;

  /* ==================================================
     Clickable chip / filter chip
     ================================================== */
  --chip-bg: var(--bg-surface);
  --chip-text: var(--text-light-primary);
  --chip-border: var(--border-button-light);
  --chip-hover-bg: var(--bg-page);
  --chip-hover-border: var(--border-strong);
  --chip-selected-bg: var(--accent-soft-bg);
  --chip-selected-text: var(--text-light-accent);
  --chip-selected-border: var(--accent-soft-border);

  /* ==================================================
     Disabled
     ================================================== */
  --control-disabled-opacity: 0.45;
  --control-disabled-cursor: not-allowed;
}

/* ==================================================
   Dark mode semantic overrides
   ================================================== */
html.dark {
  --bg-page: var(--bg-dark);
  --bg-surface: var(--bg-dark-surface);

  --text-light-primary: var(--text-dark-primary);
  --text-light-secondary: var(--text-dark-secondary);
  --text-light-muted: var(--text-dark-disabled);
  --text-light-accent: var(--text-dark-accent);
  --text-light-accent-hover: var(--text-dark-accent-hover);

  --border-default: var(--border-dark);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-button-light: var(--border-dark);
  --border-strong: var(--border-dark-strong);

  --button-ghost-text: var(--text-dark-primary);
  --button-ghost-hover-bg: var(--bg-hover-dark);

  --nav-item-text: var(--text-dark-secondary);
  --nav-item-hover-text: var(--text-dark-primary);
  --nav-item-hover-bg: var(--bg-hover-dark);

  --toggle-bg: transparent;
  --toggle-text: var(--text-dark-secondary);
  --toggle-hover-bg: var(--bg-hover-dark);
  --toggle-hover-border: var(--border-dark-strong);
  --toggle-open-text: var(--color-accent);
}

/* ==================================================
   Foundation application
   ================================================== */
html,
body {
  font-family: var(--font-body);
}

button,
input,
select,
textarea {
  font: inherit;
}