/* ========================================
   Color Primitives
   ======================================== */

:root {
  /* Brand */
  --brand-100: #e5f0ff;
  --brand-200: #cce1ff;
  --brand-300: #a2c9ff;
  --brand-400: #7bb2ff;
  --brand-500: #3c8dff;
  --brand-600: #006aff;
  --brand-700: #005ad9;
  --brand-800: #0046c5;
  --brand-900: #003ba7;
  --brand-1000: #002c7b;

  /* Black */
  --black-100: rgba(12, 12, 13, 0.05);
  --black-200: rgba(12, 12, 13, 0.1);
  --black-300: rgba(12, 12, 13, 0.2);
  --black-400: rgba(12, 12, 13, 0.4);
  --black-500: rgba(12, 12, 13, 0.7);
  --black-600: rgba(12, 12, 13, 0.8);
  --black-700: rgba(12, 12, 13, 0.85);
  --black-800: rgba(12, 12, 13, 0.9);
  --black-900: rgba(12, 12, 13, 0.95);
  --black-1000: #0c0c0d;

  /* White */
  --white-100: rgba(255, 255, 255, 0.05);
  --white-200: rgba(255, 255, 255, 0.1);
  --white-300: rgba(255, 255, 255, 0.2);
  --white-400: rgba(255, 255, 255, 0.4);
  --white-500: rgba(255, 255, 255, 0.7);
  --white-600: rgba(255, 255, 255, 0.8);
  --white-700: rgba(255, 255, 255, 0.85);
  --white-800: rgba(255, 255, 255, 0.9);
  --white-900: rgba(255, 255, 255, 0.95);
  --white-1000: #ffffff;

  /* Gray */
  --gray-100: #f5f5f5;
  --gray-200: #e6e6e6;
  --gray-300: #d9d9d9;
  --gray-400: #b3b3b3;
  --gray-500: #757575;
  --gray-600: #444444;
  --gray-700: #383838;
  --gray-800: #2c2c2c;
  --gray-900: #1e1e1e;
  --gray-1000: #111111;

  /* Slate */
  --slate-100: #f3f3f3;
  --slate-200: #e3e3e3;
  --slate-300: #cdcdcd;
  --slate-400: #b2b2b2;
  --slate-500: #949494;
  --slate-600: #767676;
  --slate-700: #5a5a5a;
  --slate-800: #434343;
  --slate-900: #303030;
  --slate-1000: #242424;

  /* Blue */
  --blue-100: #e5f0ff;
  --blue-200: #cce1ff;
  --blue-300: #a2c9ff;
  --blue-400: #7bb2ff;
  --blue-500: #3c8dff;
  --blue-600: #006aff;
  --blue-700: #005ad9;
  --blue-800: #0046c5;
  --blue-900: #003ba7;
  --blue-1000: #002c7b;

  /* Green */
  --green-100: #ebffee;
  --green-200: #cff7d3;
  --green-300: #aff4c6;
  --green-400: #85e0a3;
  --green-500: #14ae5c;
  --green-600: #009951;
  --green-700: #008043;
  --green-800: #02542d;
  --green-900: #024023;
  --green-1000: #062d1b;

  /* Yellow */
  --yellow-100: #fffbeb;
  --yellow-200: #fff1c2;
  --yellow-300: #ffe8a3;
  --yellow-400: #e8b931;
  --yellow-500: #e5a000;
  --yellow-600: #bf6a02;
  --yellow-700: #975102;
  --yellow-800: #682d03;
  --yellow-900: #522504;
  --yellow-1000: #401b01;

  /* Red */
  --red-100: #fee9e7;
  --red-200: #fdd3d0;
  --red-300: #fcb3ad;
  --red-400: #f4776a;
  --red-500: #ec221f;
  --red-600: #c00f0c;
  --red-700: #900b09;
  --red-800: #690807;
  --red-900: #4d0b0a;
  --red-1000: #300603;

  /* Pink */
  --pink-100: #fcf1fd;
  --pink-200: #fae1fa;
  --pink-300: #f5c0ef;
  --pink-400: #f19edc;
  --pink-500: #ea3fb8;
  --pink-600: #d732a8;
  --pink-700: #ba2a92;
  --pink-800: #8a226f;
  --pink-900: #57184a;
  --pink-1000: #3f1536;
}

/* ========================================
   Semantic Tokens — Light
   ======================================== */

:root,
[data-theme="light"] {
  /* Background — Default */
  --bg-default: var(--white-1000);
  --bg-default-hover: var(--gray-100);
  --bg-secondary: var(--gray-100);
  --bg-secondary-hover: var(--gray-200);
  --bg-default-tertiary: var(--gray-300);
  --bg-default-tertiary-hover: var(--gray-400);

  /* Background — Neutral */
  --bg-neutral: var(--slate-700);
  --bg-neutral-hover: var(--slate-800);
  --bg-neutral-secondary: var(--slate-300);
  --bg-neutral-secondary-hover: var(--slate-400);
  --bg-neutral-tertiary: var(--slate-200);
  --bg-neutral-tertiary-hover: var(--slate-300);

  /* Background — Brand */
  --bg-brand: var(--brand-600);
  --bg-brand-hover: var(--brand-900);
  --bg-brand-secondary: var(--brand-200);
  --bg-brand-secondary-hover: var(--brand-300);
  --bg-brand-tertiary: var(--brand-100);
  --bg-brand-tertiary-hover: var(--brand-200);

  /* Background — Positive */
  --bg-positive: var(--green-500);
  --bg-positive-hover: var(--green-600);
  --bg-positive-secondary: var(--green-200);
  --bg-positive-secondary-hover: var(--green-300);
  --bg-positive-tertiary: var(--green-100);
  --bg-positive-tertiary-hover: var(--green-200);

  /* Background — Warning */
  --bg-warning: var(--yellow-400);
  --bg-warning-hover: var(--yellow-500);
  --bg-warning-secondary: var(--yellow-200);
  --bg-warning-secondary-hover: var(--yellow-300);
  --bg-warning-tertiary: var(--yellow-100);
  --bg-warning-tertiary-hover: var(--yellow-200);

  /* Background — Danger */
  --bg-danger: var(--red-500);
  --bg-danger-hover: var(--red-600);
  --bg-danger-secondary: var(--red-200);
  --bg-danger-secondary-hover: var(--red-300);
  --bg-danger-tertiary: var(--red-100);
  --bg-danger-tertiary-hover: var(--red-200);

  /* Background — Disabled & Utilities */
  --bg-disabled: var(--gray-300);
  --bg-scrim: var(--white-600);
  --bg-blanket: var(--black-500);
  --bg-overlay: var(--black-400);
  --bg-measurement: var(--pink-200);

  /* Text — Default */
  --text-default: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-tertiary: var(--gray-400);

  /* Text — Neutral */
  --text-neutral: var(--slate-900);
  --text-neutral-secondary: var(--slate-700);
  --text-neutral-tertiary: var(--slate-600);
  --text-on-neutral: var(--slate-100);
  --text-on-neutral-secondary: var(--slate-900);
  --text-on-neutral-tertiary: var(--slate-800);

  /* Text — Brand */
  --text-brand: var(--brand-800);
  --text-brand-secondary: var(--brand-600);
  --text-brand-tertiary: var(--brand-500);
  --text-on-brand: var(--brand-100);
  --text-on-brand-secondary: var(--brand-900);
  --text-on-brand-tertiary: var(--brand-800);

  /* Text — Positive */
  --text-positive: var(--green-800);
  --text-positive-secondary: var(--green-600);
  --text-positive-tertiary: var(--green-500);
  --text-on-positive: var(--green-100);
  --text-on-positive-secondary: var(--green-800);
  --text-on-positive-tertiary: var(--green-800);

  /* Text — Warning */
  --text-warning: var(--yellow-900);
  --text-warning-secondary: var(--yellow-700);
  --text-warning-tertiary: var(--yellow-600);
  --text-on-warning: var(--yellow-1000);
  --text-on-warning-secondary: var(--yellow-800);
  --text-on-warning-tertiary: var(--yellow-900);

  /* Text — Danger */
  --text-danger: var(--red-700);
  --text-danger-secondary: var(--red-600);
  --text-danger-tertiary: var(--red-500);
  --text-on-danger: var(--red-100);
  --text-on-danger-secondary: var(--red-700);
  --text-on-danger-tertiary: var(--red-700);

  /* Text — Disabled & Utilities */
  --text-disabled: var(--gray-400);
  --text-on-disabled: var(--gray-400);
  --text-on-overlay: var(--black-1000);
  --text-on-measurement: var(--pink-800);

  /* Border — Default */
  --border-default: var(--gray-300);
  --border-default-secondary: var(--gray-500);
  --border-default-tertiary: var(--gray-700);

  /* Border — Neutral */
  --border-neutral: var(--slate-900);
  --border-neutral-secondary: var(--slate-600);
  --border-neutral-tertiary: var(--slate-400);

  /* Border — Brand */
  --border-brand: var(--brand-800);
  --border-brand-secondary: var(--brand-600);
  --border-brand-tertiary: var(--brand-500);

  /* Border — Positive */
  --border-positive: var(--green-800);
  --border-positive-secondary: var(--green-600);
  --border-positive-tertiary: var(--green-500);

  /* Border — Warning */
  --border-warning: var(--yellow-900);
  --border-warning-secondary: var(--yellow-700);
  --border-warning-tertiary: var(--yellow-600);

  /* Border — Danger */
  --border-danger: var(--red-700);
  --border-danger-secondary: var(--red-600);
  --border-danger-tertiary: var(--red-500);

  /* Border — Disabled & Utilities */
  --border-disabled: var(--gray-400);
  --border-measurement: var(--pink-400);
  --border-swatch: rgba(0, 0, 0, 0.24);

  /* Icon — Default */
  --icon-default: var(--gray-900);
  --icon-secondary: var(--gray-500);
  --icon-tertiary: var(--gray-400);

  /* Icon — Neutral */
  --icon-neutral: var(--slate-900);
  --icon-neutral-secondary: var(--slate-700);
  --icon-neutral-tertiary: var(--slate-600);
  --icon-on-neutral: var(--slate-100);
  --icon-on-neutral-secondary: var(--slate-900);
  --icon-on-neutral-tertiary: var(--slate-800);

  /* Icon — Brand */
  --icon-brand: var(--brand-800);
  --icon-brand-secondary: var(--brand-600);
  --icon-brand-tertiary: var(--brand-500);
  --icon-on-brand: var(--brand-100);
  --icon-on-brand-secondary: var(--brand-900);
  --icon-on-brand-tertiary: var(--brand-800);

  /* Icon — Positive */
  --icon-positive: var(--green-800);
  --icon-positive-secondary: var(--green-600);
  --icon-positive-tertiary: var(--green-500);
  --icon-on-positive: var(--green-100);
  --icon-on-positive-secondary: var(--green-800);
  --icon-on-positive-tertiary: var(--green-900);

  /* Icon — Warning */
  --icon-warning: var(--yellow-900);
  --icon-warning-secondary: var(--yellow-700);
  --icon-warning-tertiary: var(--yellow-600);
  --icon-on-warning: var(--yellow-1000);
  --icon-on-warning-secondary: var(--yellow-800);
  --icon-on-warning-tertiary: var(--yellow-900);

  /* Icon — Danger */
  --icon-danger: var(--red-700);
  --icon-danger-secondary: var(--red-600);
  --icon-danger-tertiary: var(--red-500);
  --icon-on-danger: var(--red-100);
  --icon-on-danger-secondary: var(--red-700);
  --icon-on-danger-tertiary: var(--red-700);

  /* Icon — Disabled & Utilities */
  --icon-disabled: var(--gray-400);
  --icon-on-disabled: var(--gray-400);
  --icon-utility: var(--pink-600);
  --icon-on-measurement: var(--pink-800);

  /* Misc */
  --color-placeholder: var(--slate-200);
}

[data-theme="dark"] {
  /* Background — Default */
  --bg-default: var(--gray-900);
  --bg-default-hover: var(--gray-700);
  --bg-secondary: var(--gray-800);
  --bg-secondary-hover: var(--gray-900);
  --bg-default-tertiary: var(--gray-600);
  --bg-default-tertiary-hover: var(--gray-700);

  /* Background — Neutral */
  --bg-neutral: var(--slate-400);
  --bg-neutral-hover: var(--slate-500);
  --bg-neutral-secondary: var(--slate-900);
  --bg-neutral-secondary-hover: var(--slate-1000);
  --bg-neutral-tertiary: var(--slate-900);
  --bg-neutral-tertiary-hover: var(--slate-1000);

  /* Background — Brand */
  --bg-brand: var(--brand-500);
  --bg-brand-hover: var(--brand-300);
  --bg-brand-secondary: var(--brand-700);
  --bg-brand-secondary-hover: var(--brand-500);
  --bg-brand-tertiary: var(--brand-1000);
  --bg-brand-tertiary-hover: var(--brand-800);

  /* Background — Positive */
  --bg-positive: var(--green-700);
  --bg-positive-hover: var(--green-800);
  --bg-positive-secondary: var(--green-800);
  --bg-positive-secondary-hover: var(--green-900);
  --bg-positive-tertiary: var(--green-900);
  --bg-positive-tertiary-hover: var(--green-1000);

  /* Background — Warning */
  --bg-warning: var(--yellow-400);
  --bg-warning-hover: var(--yellow-500);
  --bg-warning-secondary: var(--yellow-800);
  --bg-warning-secondary-hover: var(--yellow-900);
  --bg-warning-tertiary: var(--yellow-900);
  --bg-warning-tertiary-hover: var(--yellow-1000);

  /* Background — Danger */
  --bg-danger: var(--red-600);
  --bg-danger-hover: var(--red-700);
  --bg-danger-secondary: var(--red-800);
  --bg-danger-secondary-hover: var(--red-900);
  --bg-danger-tertiary: var(--red-900);
  --bg-danger-tertiary-hover: var(--red-1000);

  /* Background — Disabled & Utilities */
  --bg-disabled: var(--gray-700);
  --bg-scrim: var(--black-600);
  --bg-blanket: var(--black-500);
  --bg-overlay: var(--black-400);
  --bg-measurement: var(--pink-800);

  /* Text — Default */
  --text-default: var(--white-1000);
  --text-secondary: var(--white-500);
  --text-tertiary: var(--white-400);

  /* Text — Neutral */
  --text-neutral: var(--slate-200);
  --text-neutral-secondary: var(--slate-300);
  --text-neutral-tertiary: var(--slate-400);
  --text-on-neutral: var(--slate-1000);
  --text-on-neutral-secondary: var(--slate-100);
  --text-on-neutral-tertiary: var(--slate-100);

  /* Text — Brand */
  --text-brand: var(--brand-100);
  --text-brand-secondary: var(--brand-300);
  --text-brand-tertiary: var(--brand-400);
  --text-on-brand: var(--white-1000);
  --text-on-brand-secondary: var(--brand-100);
  --text-on-brand-tertiary: var(--brand-100);

  /* Text — Positive */
  --text-positive: var(--green-200);
  --text-positive-secondary: var(--green-400);
  --text-positive-tertiary: var(--green-600);
  --text-on-positive: var(--green-100);
  --text-on-positive-secondary: var(--green-100);
  --text-on-positive-tertiary: var(--green-100);

  /* Text — Warning */
  --text-warning: var(--yellow-200);
  --text-warning-secondary: var(--yellow-400);
  --text-warning-tertiary: var(--yellow-600);
  --text-on-warning: var(--yellow-1000);
  --text-on-warning-secondary: var(--yellow-100);
  --text-on-warning-tertiary: var(--yellow-100);

  /* Text — Danger */
  --text-danger: var(--red-200);
  --text-danger-secondary: var(--red-400);
  --text-danger-tertiary: var(--red-500);
  --text-on-danger: var(--red-100);
  --text-on-danger-secondary: var(--red-100);
  --text-on-danger-tertiary: var(--red-100);

  /* Text — Disabled & Utilities */
  --text-disabled: var(--gray-500);
  --text-on-disabled: var(--gray-400);
  --text-on-overlay: var(--white-1000);
  --text-on-measurement: var(--pink-200);

  /* Border — Default */
  --border-default: var(--gray-600);
  --border-default-secondary: var(--gray-500);
  --border-default-tertiary: var(--gray-400);

  /* Border — Neutral */
  --border-neutral: var(--slate-100);
  --border-neutral-secondary: var(--slate-500);
  --border-neutral-tertiary: var(--slate-600);

  /* Border — Brand */
  --border-brand: var(--brand-100);
  --border-brand-secondary: var(--brand-300);
  --border-brand-tertiary: var(--brand-400);

  /* Border — Positive */
  --border-positive: var(--green-200);
  --border-positive-secondary: var(--green-400);
  --border-positive-tertiary: var(--green-600);

  /* Border — Warning */
  --border-warning: var(--yellow-200);
  --border-warning-secondary: var(--yellow-400);
  --border-warning-tertiary: var(--yellow-600);

  /* Border — Danger */
  --border-danger: var(--red-200);
  --border-danger-secondary: var(--red-400);
  --border-danger-tertiary: var(--red-500);

  /* Border — Disabled & Utilities */
  --border-disabled: var(--gray-600);
  --border-measurement: var(--pink-600);
  --border-swatch: rgba(255, 255, 255, 0.24);

  /* Icon — Default */
  --icon-default: var(--white-1000);
  --icon-secondary: var(--white-500);
  --icon-tertiary: var(--white-400);

  /* Icon — Neutral */
  --icon-neutral: var(--slate-200);
  --icon-neutral-secondary: var(--slate-300);
  --icon-neutral-tertiary: var(--slate-400);
  --icon-on-neutral: var(--slate-1000);
  --icon-on-neutral-secondary: var(--slate-100);
  --icon-on-neutral-tertiary: var(--slate-100);

  /* Icon — Brand */
  --icon-brand: var(--brand-100);
  --icon-brand-secondary: var(--brand-300);
  --icon-brand-tertiary: var(--brand-400);
  --icon-on-brand: var(--brand-900);
  --icon-on-brand-secondary: var(--brand-100);
  --icon-on-brand-tertiary: var(--brand-100);

  /* Icon — Positive */
  --icon-positive: var(--green-200);
  --icon-positive-secondary: var(--green-400);
  --icon-positive-tertiary: var(--green-600);
  --icon-on-positive: var(--green-100);
  --icon-on-positive-secondary: var(--green-100);
  --icon-on-positive-tertiary: var(--green-100);

  /* Icon — Warning */
  --icon-warning: var(--yellow-200);
  --icon-warning-secondary: var(--yellow-400);
  --icon-warning-tertiary: var(--yellow-600);
  --icon-on-warning: var(--yellow-1000);
  --icon-on-warning-secondary: var(--yellow-100);
  --icon-on-warning-tertiary: var(--yellow-100);

  /* Icon — Danger */
  --icon-danger: var(--red-200);
  --icon-danger-secondary: var(--red-400);
  --icon-danger-tertiary: var(--red-500);
  --icon-on-danger: var(--red-100);
  --icon-on-danger-secondary: var(--red-100);
  --icon-on-danger-tertiary: var(--red-100);

  /* Icon — Disabled & Utilities */
  --icon-disabled: var(--gray-500);
  --icon-on-disabled: var(--gray-400);
  --icon-utility: var(--pink-400);
  --icon-on-measurement: var(--pink-200);

  /* Misc */
  --color-placeholder: var(--slate-900);
}

:root {
  /* Spacing */
  --space-0: 0px;
  --space-050: 2px;
  --space-100: 4px;
  --space-150: 6px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1200: 48px;
  --space-1600: 64px;
  --space-2400: 96px;
  --space-4000: 160px;

  /* Border Radius */
  --radius-100: 4px;
  --radius-200: 8px;
  --radius-400: 16px;
  --radius-full: 9999px;

  /* Stroke */
  --stroke-border: 1px;
  --stroke-focus-ring: 2px;

  /* Icon Sizes */
  --icon-size-sm: 24px;
  --icon-size-md: 32px;
  --icon-size-lg: 40px;

  /* Drop Shadows */
  --shadow-100: 0 1px 4px rgba(12, 12, 13, 0.05);
  --shadow-200: 0 1px 4px rgba(12, 12, 13, 0.05), 0 1px 4px rgba(12, 12, 13, 0.1);
  --shadow-300: 0 4px 4px -1px rgba(12, 12, 13, 0.05), 0 4px 4px -1px rgba(12, 12, 13, 0.1);
  --shadow-400: 0 4px 4px -4px rgba(12, 12, 13, 0.05), 0 16px 32px -4px rgba(12, 12, 13, 0.1);
  --shadow-500: 0 4px 4px -4px rgba(12, 12, 13, 0.05), 0 16px 16px -8px rgba(12, 12, 13, 0.1);
  --shadow-600: 0 16px 32px -8px rgba(12, 12, 13, 0.4);

  /* Inner Shadows */
  --inner-shadow-100: inset 0 1px 4px rgba(12, 12, 13, 0.05);
  --inner-shadow-200: inset 0 1px 4px rgba(12, 12, 13, 0.05);
  --inner-shadow-300: inset 0 4px 4px -1px rgba(12, 12, 13, 0.05);
  --inner-shadow-400: inset 0 16px 32px -4px rgba(12, 12, 13, 0.1);
  --inner-shadow-500: inset 0 16px 16px -8px rgba(12, 12, 13, 0.1);
  --inner-shadow-600: inset 0 16px 32px -8px rgba(12, 12, 13, 0.4);

  /* Blur */
  --blur-overlay: blur(4px);
  --blur-layer: blur(4px);
  --blur-glass: blur(4px);

  /* Typography — Font Family */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Roboto Mono', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;

  /* Typography — Sizes */
  --text-title-hero: 72px;
  --text-title-page: 48px;
  --text-subtitle: 32px;
  --text-subtitle-small: 24px;
  --text-heading: 24px;
  --text-subheading: 20px;
  --text-body: 16px;
  --text-body-small: 14px;

  /* Typography — Weights */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Typography — Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-none: 1;
  --leading-code: 1.3;

  /* Layout */
  --device-width: 1200px;
}