:root {
  /* ─── PRIMITIVE TOKENS ─────────────────────────────────────── */

  /* Neutral */
  --neutral-800: #273545;
  --neutral-700: #424F5F;
  --neutral-600: #5D6A7A;
  --neutral-500: #67788B;
  --neutral-450: #99A5B3;
  --neutral-400: #DEE1E5;
  --neutral-300: #EBEDEF;
  --neutral-200: #F7F8F8;
  --neutral-white: #FFFFFF;

  /* Brand (teal) */
  --brand-800: #0A4343;
  --brand-700: #076262;
  --brand-600: #00847D;
  --brand-500: #00B8AF;
  --brand-400: #19D1C9;
  --brand-300: #90E4E0;
  --brand-200: #DCF9F7;

  /* Danger */
  --danger-800: #3D110D;
  --danger-700: #8A3128;
  --danger-600: #B40F07;
  --danger-500: #D81209;
  --danger-400: #F9716B;
  --danger-300: #F5CDCA;
  --danger-200: #FCF1F0;

  /* Warning */
  --warning-800: #472F06;
  --warning-700: #916008;
  --warning-600: #CF8F1F;
  --warning-500: #EDA423;
  --warning-400: #FCD897;
  --warning-300: #FEECCD;
  --warning-200: #FEF9F0;

  /* ─── SEMANTIC TOKENS ──────────────────────────────────────── */

  /* Text */
  --color-text-default:  var(--neutral-800);
  --color-text-subtle:   var(--neutral-500);
  --color-text-link:     var(--brand-600);
  --color-text-danger:   var(--danger-500);
  --color-text-disabled: var(--neutral-450);

  /* Border */
  --color-border-divider:      var(--neutral-400);
  --color-border-input:        var(--neutral-500);
  --color-border-input-active: var(--brand-600);
  --color-border-input-error:  var(--danger-500);

  /* Surface */
  --color-surface-default: var(--neutral-white);
  --color-surface-subtle:  var(--neutral-200);
  --color-surface-dark:    var(--neutral-800);

  /* Brand bar */
  --color-surface-brand:        var(--brand-600);
  --color-surface-brand-hover:  var(--brand-700);
  --color-text-on-brand:        var(--neutral-white);
  --color-text-on-brand-subtle: var(--brand-300);

  /* Interactive rows */
  --color-surface-hover:    var(--neutral-200);
  --color-surface-selected: var(--brand-200);

  /* Suggestion / info accent */
  --color-surface-info: var(--neutral-200);
  --color-text-info:    var(--neutral-700);
  --color-border-info:  var(--neutral-300);

  /* Hint */
  --color-surface-hint: var(--neutral-200);
  --color-text-hint:    var(--neutral-600);

  /* Status pill */
  --color-surface-status-active: var(--brand-200);
  --color-text-status-active:    var(--brand-600);

  /* Avatar */
  --color-surface-avatar: var(--neutral-300);
  --color-text-avatar:    var(--neutral-700);

  /* ─── TYPOGRAPHY ───────────────────────────────────────────── */

  --font-family-sans: "Segoe UI", "Segoe UI Web (West European)",
                      -apple-system, BlinkMacSystemFont, Roboto,
                      "Helvetica Neue", sans-serif;

  --font-heading-size:         13px;
  --font-heading-line-height:  18px;
  --font-heading-weight:       600;

  --font-body-size:            12px;
  --font-body-line-height:     16px;
  --font-body-weight-regular:  400;
  --font-body-weight-semibold: 600;

  --font-caption-size:        11px;
  --font-caption-line-height: 15px;
  --font-caption-weight:      400;

  /* ─── BORDER RADIUS ────────────────────────────────────────── */

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* ─── SPACING ──────────────────────────────────────────────── */

  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-8:  16px;
  --space-10: 20px;
}