/* rent-split visual tokens. The build copies this file into the app. */
:root, [data-theme="light"] {
  --color-bg: #f3efe6;
  --color-surface: #faf7f1;
  --color-surface-raised: #fffdf8;
  --color-text: #2a241c;
  --color-text-muted: #5e564c;
  --color-border: #e0d6c8;
  --color-border-strong: #c4b6a4;
  --color-accent: #8a3d24;
  --color-accent-hover: #732f1b;
  --color-accent-text: #fff8f3;
  --color-accent-soft: #f6e6dc;
  --color-focus: #8a3d24;
  --color-danger: #9b2c2c;
  --color-danger-text: #8a2424;
  --color-danger-soft: #f8e4e1;
  --color-success: #1e6b42;
  --color-success-text: #1e6b42;
  --color-success-soft: #e5f2ea;
  --color-warning: #8a5a10;
  --color-warning-text: #8a5a10;
  --color-warning-soft: #f8efd8;
  --color-info: #2f5270;
  --color-info-text: #2f5270;
  --color-info-soft: #e6eef4;
  --color-skeleton: #e7dfd3;

  --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --size-touch: 44px;
  --size-icon: 20px;
  --size-avatar: 32px;
  --size-control: 44px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  --border-hair: 1px;
  --border-strong: 2px;

  --shadow-raised: 0 1px 2px #2a241c14, 0 8px 24px #2a241c12;
  --shadow-pop: 0 1px 2px #2a241c10, 0 16px 40px #2a241c18;

  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-press: 0.98;

  --z-base: 0;
  --z-sticky: 10;
  --z-overlay: 20;
  --z-toast: 30;

  --layout-page: 1120px;
  --layout-text: 65ch;
  --layout-receipt: 380px;
}

[data-theme="dark"] {
  --color-bg: #1b1714;
  --color-surface: #26211c;
  --color-surface-raised: #312b25;
  --color-text: #f4ece3;
  --color-text-muted: #cbbbaa;
  --color-border: #41382f;
  --color-border-strong: #5c5146;
  --color-accent: #e3b09a;
  --color-accent-hover: #f0c4b0;
  --color-accent-text: #2a1812;
  --color-accent-soft: #3a2c26;
  --color-focus: #e3b09a;
  --color-danger: #f0a8a2;
  --color-danger-text: #f0a8a2;
  --color-danger-soft: #3a2624;
  --color-success: #9ed4b4;
  --color-success-text: #9ed4b4;
  --color-success-soft: #24362c;
  --color-warning: #e6c98a;
  --color-warning-text: #e6c98a;
  --color-warning-soft: #3a3224;
  --color-info: #b7d0e4;
  --color-info-text: #b7d0e4;
  --color-info-soft: #243038;
  --color-skeleton: #3a332c;
  --shadow-raised: 0 0 0 1px #f4ece314;
  --shadow-pop: 0 0 0 1px #f4ece31f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1b1714;
    --color-surface: #26211c;
    --color-surface-raised: #312b25;
    --color-text: #f4ece3;
    --color-text-muted: #cbbbaa;
    --color-border: #41382f;
    --color-border-strong: #5c5146;
    --color-accent: #e3b09a;
    --color-accent-hover: #f0c4b0;
    --color-accent-text: #2a1812;
    --color-accent-soft: #3a2c26;
    --color-focus: #e3b09a;
    --color-danger: #f0a8a2;
    --color-danger-text: #f0a8a2;
    --color-danger-soft: #3a2624;
    --color-success: #9ed4b4;
    --color-success-text: #9ed4b4;
    --color-success-soft: #24362c;
    --color-warning: #e6c98a;
    --color-warning-text: #e6c98a;
    --color-warning-soft: #3a3224;
    --color-info: #b7d0e4;
    --color-info-text: #b7d0e4;
    --color-info-soft: #243038;
    --color-skeleton: #3a332c;
    --shadow-raised: 0 0 0 1px #f4ece314;
    --shadow-pop: 0 0 0 1px #f4ece31f;
  }
}