html,
body {
  margin: 0;
  padding: 0;

  color: var(--text-primary);
  background: var(--bg-primary);
}

/* Alias level based on the global tokens */
:where(html) {
}

:root {
  /* ==========================================================================
   LIGHT MODE ALIASES
   ========================================================================== */

  /* Backgrounds */
  --bg-primary: var(--color-neutral-0); /* Main page background */
  --bg-secondary: var(--color-neutral-50); /* Cards, surfaces */
  --bg-tertiary: var(--color-neutral-100); /* Panels, secondary surfaces */
  --bg-hover: var(--color-neutral-200); /* Hover states */
  --bg-active: var(--color-neutral-300); /* Active states */

  /* Text */
  --text-primary: var(--color-neutral-900); /* Main content */
  --text-secondary: var(--color-neutral-700); /* Secondary content */
  --text-tertiary: var(--color-neutral-500); /* Disabled or muted text */
  --text-inverse: var(--color-neutral-0); /* For dark backgrounds */

  /* Borders / Dividers */
  --border-default: var(--color-neutral-200);
  --border-strong: var(--color-neutral-400);
  --border-muted: var(--color-neutral-100);

  /* Brand Colors - Interactive / Emphasis */
  --brand-primary: var(--color-primary-500);
  --brand-primary-hover: var(--color-primary-600);
  --brand-primary-active: var(--color-primary-700);

  --brand-secondary: var(--color-secondary-500);
  --brand-secondary-hover: var(--color-secondary-600);
  --brand-secondary-active: var(--color-secondary-700);

  /* Semantic Colors - Status */
  --color-success: var(--color-success-500);
  --color-success-hover: var(--color-success-600);
  --color-success-bg: var(--color-success-50);

  --color-warning: var(--color-warning-500);
  --color-warning-hover: var(--color-warning-600);
  --color-warning-bg: var(--color-warning-50);

  --color-error: var(--color-error-500);
  --color-error-hover: var(--color-error-600);
  --color-error-bg: var(--color-error-50);

  --color-info: var(--color-info-500);
  --color-info-hover: var(--color-info-600);
  --color-info-bg: var(--color-info-50);

  --link-default: var(--color-primary-500); /* almost black */
  --link-hover: var(--color-primary-400); /* slightly lighter for hover */
  --link-active: var(--color-primary-600); /* slightly darker when active */
  --link-visited: var(--color-secondary-700);

  --input-bg: var(--color-secondary-0); /* white background */
  --input-border: var(--color-secondary-300); /* neutral border */
  --input-hover-border: var(
    --color-secondary-400
  ); /* slightly stronger on hover */
  --input-focus-border: var(--color-primary-500); /* almost black focus ring */
  --input-text: var(--color-primary-900); /* dark text */
  --input-placeholder: var(--color-secondary-500); /* subtle gray placeholder */
  --input-disabled-bg: var(--color-secondary-100);
  --input-disabled-border: var(--color-secondary-200);
  --input-disabled-text: var(--color-secondary-400);

  --sidebar-primary: var(--color-neutral-800);

  /* Light mode elevation tokens */
  --elevation-0: none;
  --elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.12);
  --elevation-2: 0px 2px 4px rgba(0, 0, 0, 0.14);
  --elevation-3: 0px 4px 8px rgba(0, 0, 0, 0.16);
  --elevation-4: 0px 8px 16px rgba(0, 0, 0, 0.18);
  --elevation-5: 0px 12px 24px rgba(0, 0, 0, 0.2);
}
[theme='dark'] {
  /* ==========================================================================
   DARK MODE ALIASES
   ========================================================================== */

  /* Backgrounds */
  --bg-primary: var(--color-neutral-950); /* Main page background */
  --bg-secondary: var(--color-neutral-800); /* Cards, surfaces */
  --bg-tertiary: var(--color-neutral-700); /* Panels, secondary surfaces */
  --bg-hover: var(--color-neutral-700); /* Hover states */
  --bg-active: var(--color-neutral-600); /* Active states */

  /* Text */
  --text-primary: var(--color-neutral-50); /* Main content */
  --text-secondary: var(--color-neutral-200); /* Secondary content */
  --text-tertiary: var(--color-neutral-400); /* Disabled or muted text */
  --text-inverse: var(--color-neutral-950); /* For light backgrounds */

  /* Borders / Dividers */
  --border-default: var(--color-neutral-700);
  --border-strong: var(--color-neutral-600);
  --border-muted: var(--color-neutral-800);

  /* Brand Colors - Interactive / Emphasis */
  --brand-primary: var(--color-primary-400);
  --brand-primary-hover: var(--color-primary-300);
  --brand-primary-active: var(--color-primary-200);

  --brand-secondary: var(--color-secondary-400);
  --brand-secondary-hover: var(--color-secondary-300);
  --brand-secondary-active: var(--color-secondary-200);

  /* Semantic Colors - Status */
  --color-success: var(--color-success-400);
  --color-success-hover: var(--color-success-300);
  --color-success-bg: var(--color-success-900);

  --color-warning: var(--color-warning-400);
  --color-warning-hover: var(--color-warning-300);
  --color-warning-bg: var(--color-warning-900);

  --color-error: var(--color-error-400);
  --color-error-hover: var(--color-error-300);
  --color-error-bg: var(--color-error-900);

  --color-info: var(--color-info-400);
  --color-info-hover: var(--color-info-300);
  --color-info-bg: var(--color-info-900);

  --link-default: var(--color-secondary-100); /* light gray link */
  --link-hover: var(--color-secondary-50); /* lighter hover */
  --link-active: var(--color-secondary-200); /* slightly darker when active */
  --link-visited: var(--color-secondary-300); /* subtle visited link */

  --input-bg: var(--color-primary-900); /* dark gray background */
  --input-border: var(--color-secondary-700); /* soft border */
  --input-hover-border: var(--color-secondary-600); /* lighter hover border */
  --input-focus-border: var(--color-secondary-400); /* light focus ring */
  --input-text: var(--color-secondary-50); /* light text */
  --input-placeholder: var(--color-secondary-400); /* muted placeholder */
  --input-disabled-bg: var(--color-primary-800);
  --input-disabled-border: var(--color-secondary-800);
  --input-disabled-text: var(--color-secondary-600);

  /* Dark mode elevation tokens */
  --elevation-0: none;
  --elevation-1:
    0px 1px 2px rgba(0, 0, 0, 0.5), 0px 0px 1px rgba(255, 255, 255, 0.08);
  --elevation-2:
    0px 2px 4px rgba(0, 0, 0, 0.6), 0px 0px 1px rgba(255, 255, 255, 0.1);
  --elevation-3:
    0px 4px 8px rgba(0, 0, 0, 0.65), 0px 0px 1px rgba(255, 255, 255, 0.12);
  --elevation-4:
    0px 8px 16px rgba(0, 0, 0, 0.7), 0px 0px 1px rgba(255, 255, 255, 0.14);
  --elevation-5:
    0px 12px 24px rgba(0, 0, 0, 0.75), 0px 0px 1px rgba(255, 255, 255, 0.16);
}