:root, [data-theme="light"] {
  --color-bg:               #f7f6f2;
  --color-surface:          #f9f8f5;
  --color-surface-2:        #fbfbf9;
  --color-surface-offset:   #f0ede8;
  --color-surface-dynamic:  #e6e4df;
  --color-divider:          #dcd9d5;
  --color-border:           #d4d1ca;
  --color-text:             #28251d;
  --color-text-muted:       #7a7974;
  --color-text-faint:       #bab9b4;
  --color-text-inverse:     #f9f8f4;
  --color-primary:          #01696f;
  --color-primary-hover:    #0c4e54;
  --color-primary-highlight:#cedcd8;
  --color-success:          #437a22;
  --color-success-hover:    #2e5c10;
  --color-success-highlight:#d4dfcc;
  --color-warning:          #964219;
  --color-warning-hover:    #713417;
  --color-warning-highlight:#ddcfc6;
  --color-error:            #a12c7b;
  --color-error-hover:      #7d1e5e;
  --color-error-highlight:  #e0ced7;

  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  --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;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.2vw,  0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.3vw,  1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,  1.4rem);
  --text-xl:   clamp(1.4rem,   1.2rem  + 1vw,    2rem);

  --font-body:    "Satoshi", "Helvetica Neue", sans-serif;

  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.09);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.13);

  --sidebar-w:    220px;
  --topbar-h:     52px;
}

[data-theme="dark"] {
  --color-bg:               #111110;
  --color-surface:          #171614;
  --color-surface-2:        #1c1b19;
  --color-surface-offset:   #1e1d1b;
  --color-surface-dynamic:  #252421;
  --color-divider:          #272523;
  --color-border:           #313030;
  --color-text:             #d0ceca;
  --color-text-muted:       #797775;
  --color-text-faint:       #4a4947;
  --color-text-inverse:     #1a1918;
  --color-primary:          #4f98a3;
  --color-primary-hover:    #227f8b;
  --color-primary-highlight:#1a2f33;
  --color-success:          #6daa45;
  --color-success-hover:    #4d8f25;
  --color-success-highlight:#1b2c16;
  --color-warning:          #c06b3e;
  --color-warning-hover:    #b95525;
  --color-warning-highlight:#2d1d12;
  --color-error:            #d163a7;
  --color-error-hover:      #b9478f;
  --color-error-highlight:  #2d1823;
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.5);
}