/* ==========================================================================
   LifeTrack Design System — Claude UI Kit
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom Properties (Tokens)
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --color-brand-50:  #fdf5f0;
  --color-brand-100: #fae6d9;
  --color-brand-200: #f5c9b0;
  --color-brand-300: #eda47f;
  --color-brand-400: #e07d51;
  --color-brand-500: #cc785c; /* Claude primary */
  --color-brand-600: #b56044;
  --color-brand-700: #934b35;
  --color-brand-800: #703929;
  --color-brand-900: #4e2819;

  /* Neutrals — warm-tinted grays */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #faf9f7; /* page background */
  --color-neutral-100: #f2f0ec;
  --color-neutral-200: #e8e5df;
  --color-neutral-300: #d5d0c8;
  --color-neutral-400: #b5b0a6;
  --color-neutral-500: #8a857a;
  --color-neutral-600: #6b6660;
  --color-neutral-700: #4e4a45;
  --color-neutral-800: #333030;
  --color-neutral-900: #1a1917; /* primary text */

  /* Semantic */
  --color-success-light: #d4edda;
  --color-success:       #3a7d44;
  --color-warning-light: #fff3cd;
  --color-warning:       #856404;
  --color-error-light:   #fde8e8;
  --color-error:         #c0392b;
  --color-info-light:    #dbeafe;
  --color-info:          #1d4ed8;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Tiempos Headline", "Georgia", ui-serif, serif;
  --font-mono: "Söhne Mono", "JetBrains Mono", ui-monospace, "Cascadia Code",
               "Fira Code", Consolas, monospace;

  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Spacing */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.06);

  /* Borders */
  --border-color:        var(--color-neutral-200);
  --border-color-strong: var(--color-neutral-300);
  --border-width:        1px;

  /* Transitions */
  --duration-fast:   100ms;
  --duration-base:   150ms;
  --duration-slow:   250ms;
  --ease-default:    cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;

  /* Layout */
  --sidebar-width:      260px;
  --content-max-width:  760px;
  --page-padding-x:     var(--space-6);
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-neutral-900);
}

h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--text-xl);  letter-spacing: -0.01em; }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p { line-height: var(--leading-relaxed); }

a {
  color: var(--color-brand-600);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-default);
}
a:hover { color: var(--color-brand-700); text-decoration: underline; }

strong { font-weight: var(--font-semibold); }
em     { font-style: italic; }

small { font-size: var(--text-sm); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background: var(--color-neutral-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-neutral-200);
}

pre {
  background: var(--color-neutral-900);
  color: var(--color-neutral-100);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  line-height: var(--leading-relaxed);
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
  color: inherit;
}

blockquote {
  border-left: 3px solid var(--color-brand-400);
  padding: var(--space-2) var(--space-4);
  color: var(--color-neutral-600);
  font-style: italic;
  background: var(--color-brand-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

hr {
  border: none;
  border-top: 1px solid var(--color-neutral-200);
  margin: var(--space-6) 0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-neutral-100);
  border-right: 1px solid var(--color-neutral-200);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: var(--z-raised);
}

.sidebar-header {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-logo {
  width: 28px;
  height: 28px;
  background: var(--color-brand-500);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
}

.sidebar-brand {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  letter-spacing: -0.01em;
}

.sidebar-nav {
  padding: var(--space-3) var(--space-2);
  flex: 1;
}

.sidebar-section {
  margin-bottom: var(--space-6);
}

.sidebar-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-neutral-500);
  padding: 0 var(--space-2) var(--space-2);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
  line-height: 1;
}

.sidebar-link:hover {
  background: var(--color-neutral-200);
  color: var(--color-neutral-900);
  text-decoration: none;
}

.sidebar-link.active {
  background: var(--color-neutral-0);
  color: var(--color-neutral-900);
  box-shadow: var(--shadow-xs);
}

.sidebar-link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-neutral-500);
}

.sidebar-link.active .sidebar-link-icon {
  color: var(--color-brand-500);
}

/* Main content */
.main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-header {
  padding: var(--space-6) var(--page-padding-x) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.page-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  letter-spacing: -0.01em;
}

.page-body {
  padding: var(--space-6) var(--page-padding-x);
  flex: 1;
  max-width: calc(var(--content-max-width) + var(--page-padding-x) * 2);
}

/* Grid utilities */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* Stack & cluster */
.stack   { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   5. Card
   -------------------------------------------------------------------------- */

.card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.card-sm { padding: var(--space-4); border-radius: var(--radius-lg); }
.card-lg { padding: var(--space-8); border-radius: var(--radius-2xl); }

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-top: var(--space-1);
}

.card-body { color: var(--color-neutral-700); line-height: var(--leading-relaxed); }

.card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-neutral-100);
}

/* Stat card */
.stat-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.stat-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-neutral-500);
  margin-bottom: var(--space-2);
}

.stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-delta {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-top: var(--space-1);
}

.stat-delta.up   { color: var(--color-success); }
.stat-delta.down { color: var(--color-error); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  user-select: none;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.btn-primary {
  background: var(--color-neutral-900);
  color: var(--color-neutral-0);
  border-color: var(--color-neutral-900);
}
.btn-primary:hover {
  background: var(--color-neutral-800);
  border-color: var(--color-neutral-800);
  color: var(--color-neutral-0);
  text-decoration: none;
}

/* Brand */
.btn-brand {
  background: var(--color-brand-500);
  color: var(--color-neutral-0);
  border-color: var(--color-brand-500);
}
.btn-brand:hover {
  background: var(--color-brand-600);
  border-color: var(--color-brand-600);
  color: var(--color-neutral-0);
  text-decoration: none;
}

/* Secondary */
.btn-secondary {
  background: var(--color-neutral-0);
  color: var(--color-neutral-800);
  border-color: var(--color-neutral-300);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  background: var(--color-neutral-50);
  border-color: var(--color-neutral-400);
  color: var(--color-neutral-900);
  text-decoration: none;
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--color-neutral-700);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--color-neutral-100);
  color: var(--color-neutral-900);
  text-decoration: none;
}

/* Danger */
.btn-danger {
  background: var(--color-error-light);
  color: var(--color-error);
  border-color: transparent;
}
.btn-danger:hover {
  background: #f5c6c6;
  color: var(--color-error);
  text-decoration: none;
}

/* Sizes */
.btn-xs { padding: calc(var(--space-1) + 1px) var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-md); }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-md); border-radius: var(--radius-xl); }

/* Icon button */
.btn-icon {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  aspect-ratio: 1;
}

/* --------------------------------------------------------------------------
   7. Form Controls
   -------------------------------------------------------------------------- */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-800);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  line-height: var(--leading-snug);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
}

.input,
.textarea,
.select {
  width: 100%;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-neutral-900);
  line-height: var(--leading-normal);
  box-shadow: var(--shadow-inset);
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast);
  outline: none;
}

.input::placeholder,
.textarea::placeholder { color: var(--color-neutral-400); }

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--color-neutral-400);
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 3px rgb(204 120 92 / 0.15), var(--shadow-inset);
}

.input.error,
.textarea.error,
.select.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgb(192 57 43 / 0.12), var(--shadow-inset);
}

.textarea {
  resize: vertical;
  min-height: 96px;
  line-height: var(--leading-relaxed);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a857a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

/* Range slider */
.range {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-200);
  outline: none;
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-brand-500);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast);
}
.range::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* Checkbox & Radio */
.checkbox,
.radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-neutral-800);
}

.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-neutral-300);
  background: var(--color-neutral-0);
  accent-color: var(--color-brand-500);
  cursor: pointer;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   8. Rating component (1–10)
   -------------------------------------------------------------------------- */

.rating {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.rating-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-0);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    background var(--duration-fast),
    border-color var(--duration-fast),
    color var(--duration-fast);
}

.rating-btn:hover {
  background: var(--color-brand-50);
  border-color: var(--color-brand-300);
  color: var(--color-brand-600);
}

.rating-btn.selected {
  background: var(--color-brand-500);
  border-color: var(--color-brand-500);
  color: var(--color-neutral-0);
}

/* --------------------------------------------------------------------------
   9. Badge / Tag
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.5;
  white-space: nowrap;
}

.badge-neutral  { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.badge-brand    { background: var(--color-brand-100);   color: var(--color-brand-700); }
.badge-success  { background: var(--color-success-light); color: var(--color-success); }
.badge-warning  { background: var(--color-warning-light); color: var(--color-warning); }
.badge-error    { background: var(--color-error-light);   color: var(--color-error); }
.badge-info     { background: var(--color-info-light);    color: var(--color-info); }

/* --------------------------------------------------------------------------
   10. Alert / Banner
   -------------------------------------------------------------------------- */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  border: 1px solid transparent;
}

.alert-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }

.alert-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); border-color: var(--color-neutral-200); }
.alert-success { background: var(--color-success-light); color: var(--color-success); border-color: #b7dfc0; }
.alert-warning { background: var(--color-warning-light); color: var(--color-warning); border-color: #ffe08a; }
.alert-error   { background: var(--color-error-light);   color: var(--color-error);   border-color: #f5b7b1; }
.alert-info    { background: var(--color-info-light);    color: var(--color-info);    border-color: #bfdbfe; }

/* --------------------------------------------------------------------------
   11. Table
   -------------------------------------------------------------------------- */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

thead {
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-neutral-200);
}

th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
  white-space: nowrap;
}

td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-neutral-800);
  border-bottom: 1px solid var(--color-neutral-100);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover { background: var(--color-neutral-50); }

/* --------------------------------------------------------------------------
   12. Avatar
   -------------------------------------------------------------------------- */

.avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-weight: var(--font-semibold);
  background: var(--color-brand-100);
  color: var(--color-brand-700);
  flex-shrink: 0;
  overflow: hidden;
}

.avatar-xs { width: 24px; height: 24px; font-size: var(--text-xs); }
.avatar-sm { width: 32px; height: 32px; font-size: var(--text-sm); }
.avatar-md { width: 40px; height: 40px; font-size: var(--text-base); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--text-lg); }
.avatar-xl { width: 64px; height: 64px; font-size: var(--text-xl); }

.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   13. Divider
   -------------------------------------------------------------------------- */

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-neutral-400);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-neutral-200);
}

/* --------------------------------------------------------------------------
   14. Empty state
   -------------------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  color: var(--color-neutral-300);
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
}

.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  max-width: 320px;
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   15. Toast / Notification
   -------------------------------------------------------------------------- */

.toast-region {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-900);
  color: var(--color-neutral-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
  max-width: 360px;
  pointer-events: auto;
  animation: toast-in var(--duration-slow) var(--ease-default);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   16. Spinner / Loading
   -------------------------------------------------------------------------- */

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-md { width: 20px; height: 20px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

/* --------------------------------------------------------------------------
   17. Skeleton
   -------------------------------------------------------------------------- */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 25%,
    var(--color-neutral-200) 50%,
    var(--color-neutral-100) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton-text  { height: 1em; border-radius: var(--radius-sm); }
.skeleton-title { height: 1.5em; width: 55%; border-radius: var(--radius-sm); }
.skeleton-avatar{ border-radius: 50%; }

/* --------------------------------------------------------------------------
   18. Progress bar
   -------------------------------------------------------------------------- */

.progress {
  height: 6px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--color-brand-500);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-default);
}

.progress-bar.success { background: var(--color-success); }
.progress-bar.warning { background: #d97706; }
.progress-bar.error   { background: var(--color-error); }

/* --------------------------------------------------------------------------
   19. Utility classes
   -------------------------------------------------------------------------- */

/* Text */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-2xl    { font-size: var(--text-2xl); }
.text-3xl    { font-size: var(--text-3xl); }

.text-muted    { color: var(--color-neutral-500); }
.text-subtle   { color: var(--color-neutral-400); }
.text-body     { color: var(--color-neutral-700); }
.text-strong   { color: var(--color-neutral-900); }
.text-brand    { color: var(--color-brand-500); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning); }
.text-error    { color: var(--color-error); }

.font-normal   { font-weight: var(--font-normal); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spacing */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Display / flex */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end  { justify-content: flex-end; }
.flex-1       { flex: 1; }
.flex-wrap    { flex-wrap: wrap; }
.w-full       { width: 100%; }
.hidden       { display: none; }

/* Misc */
.rounded-full { border-radius: var(--radius-full); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --sidebar-width: 220px; }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-default);
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .page-body { padding: var(--space-4); }
}

/* --------------------------------------------------------------------------
   21. Dark mode
   -------------------------------------------------------------------------- */

/* Dark tokens — applied via [data-theme="dark"] on <html>,
   or automatically when user prefers dark and no explicit theme is set. */
:root[data-theme="dark"],
:root:not([data-theme="light"]):not([data-theme="dark"]) {
  /* no-op placeholder so the selector below is scoped correctly */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-neutral-0:   #1a1917;
    --color-neutral-50:  #211f1c;
    --color-neutral-100: #2a2824;
    --color-neutral-200: #3a3733;
    --color-neutral-300: #4e4a45;
    --color-neutral-400: #6b6660;
    --color-neutral-500: #8a857a;
    --color-neutral-600: #b5b0a6;
    --color-neutral-700: #d5d0c8;
    --color-neutral-800: #e8e5df;
    --color-neutral-900: #f5f3ef;
    --border-color: var(--color-neutral-200);
    --border-color-strong: var(--color-neutral-300);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-neutral-0:   #1a1917;
  --color-neutral-50:  #211f1c;
  --color-neutral-100: #2a2824;
  --color-neutral-200: #3a3733;
  --color-neutral-300: #4e4a45;
  --color-neutral-400: #6b6660;
  --color-neutral-500: #8a857a;
  --color-neutral-600: #b5b0a6;
  --color-neutral-700: #d5d0c8;
  --color-neutral-800: #e8e5df;
  --color-neutral-900: #f5f3ef;
  --border-color: var(--color-neutral-200);
  --border-color-strong: var(--color-neutral-300);
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: inline-block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: none; }
}