:root {
  /* ============================================
     Brand Colors
     ============================================ */
  --color-primary: #F8F3EC;
  --color-secondary: #FFFFFF;
  --color-tertiary: #EADFCF;
  --color-neutral: #4B3F35;

  /* ============================================
     Primary Scale — #F8F3EC
     ============================================ */
  --primary-50: #FDFBF8;
  --primary-100: #FAF6F1;
  --primary-200: #F8F3EC;
  --primary-300: #F0E8DC;
  --primary-400: #E8DCC8;
  --primary-500: #DFCEB8;
  --primary-600: #D4BFA5;
  --primary-700: #C4AA8E;
  --primary-800: #A89072;
  --primary-900: #8B7558;

  /* ============================================
     Secondary Scale — #FFFFFF
     ============================================ */
  --secondary-50: #FFFFFF;
  --secondary-100: #FAFAFA;
  --secondary-200: #F5F5F5;
  --secondary-300: #EEEEEE;
  --secondary-400: #E0E0E0;
  --secondary-500: #BDBDBD;
  --secondary-600: #9E9E9E;
  --secondary-700: #757575;
  --secondary-800: #616161;
  --secondary-900: #424242;

  /* ============================================
     Tertiary Scale — #EADFCF
     ============================================ */
  --tertiary-50: #FAF7F3;
  --tertiary-100: #F5EFE8;
  --tertiary-200: #EADFCF;
  --tertiary-300: #DFD0BC;
  --tertiary-400: #D4C1A9;
  --tertiary-500: #C9B196;
  --tertiary-600: #B89F82;
  --tertiary-700: #A68B6C;
  --tertiary-800: #8F7558;
  --tertiary-900: #735E45;

  /* ============================================
     Neutral Scale — #4B3F35
     ============================================ */
  --neutral-50: #F5F3F1;
  --neutral-100: #E8E4E0;
  --neutral-200: #D1C9C2;
  --neutral-300: #B5A99E;
  --neutral-400: #96887A;
  --neutral-500: #7A6B5C;
  --neutral-600: #655649;
  --neutral-700: #4B3F35;
  --neutral-800: #3D332B;
  --neutral-900: #2A221C;

  /* ============================================
     Semantic Colors
     ============================================ */
  --color-background: var(--primary-300);
  --color-surface: var(--color-secondary);
  --color-surface-alt: var(--color-primary);
  --color-surface-muted: var(--color-tertiary);

  --color-text: var(--color-neutral);
  --color-text-muted: var(--neutral-500);
  --color-text-inverse: var(--color-secondary);

  --color-border: var(--tertiary-300);
  --color-border-strong: var(--neutral-400);

  --color-danger: #C02626;
  --color-danger-hover: #A01F1F;

  /* ============================================
     Button Tokens
     ============================================ */
  --btn-primary-bg: var(--color-neutral);
  --btn-primary-text: var(--color-secondary);
  --btn-primary-hover: var(--neutral-800);

  --btn-secondary-bg: var(--color-tertiary);
  --btn-secondary-text: var(--color-neutral);
  --btn-secondary-hover: var(--tertiary-300);

  --btn-outline-border: var(--neutral-300);
  --btn-outline-text: var(--color-neutral);
  --btn-outline-hover-bg: var(--neutral-50);

  /* ============================================
     Typography
     ============================================ */
  --font-headline: "Playfair Display", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-label: "Plus Jakarta Sans", system-ui, sans-serif;

  /* ============================================
     Radius & Shadow
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(75, 63, 53, 0.06);
  --shadow-md: 0 4px 12px rgba(75, 63, 53, 0.08);

  /* ============================================
     Scrollbar
     ============================================ */
  --scrollbar-size: 8px;
  --scrollbar-track: var(--primary-300);
  --scrollbar-thumb: var(--neutral-300);
  --scrollbar-thumb-hover: var(--neutral-500);
  --scrollbar-thumb-active: var(--neutral-600);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chrome, Safari, Edge */
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  border: 2px solid var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* ============================================
   Number Input — hide spin buttons
   ============================================ */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================
   Empty state
   ============================================ */
.content-empty,
.profile-empty {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-neutral);
  opacity: 0.72;
  font-size: 0.95rem;
}

td.content-empty {
  display: table-cell;
  padding: 2.5rem 1rem;
}