/* SnapAs tokens. Generated by scripts/gen-tokens-css.py from Claude Design's tokens; do not edit. */

:root {
  --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;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --duration-celebrate: 640ms;
  --duration-pulse: 1600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-settle: cubic-bezier(0.34, 1.4, 0.64, 1);
  --touch-target: 48px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --app-bar-height: 64px;
  --bottom-nav-height: 72px;
  --rail-width: 96px;
  --tap-column: 640px;
  --form-column: 400px;
  --opacity-disabled: 0.45;
  --opacity-inactive: 0.62;
  --z-nav: 10;
  --z-fab: 20;
  --z-sheet: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

/* Light (default) */
:root {
  --paper: #f6f1e9;
  --surface: #fffcf7;
  --surface-raised: #fffcf7;
  --surface-sunken: #eee6da;
  --line: #e3d9ca;
  --line-strong: #8c7e6d;
  --ink: #2a211a;
  --ink-muted: #65584b;
  --accent: #f27b35;
  --accent-hover: #e86a24;
  --on-accent: #2a1608;
  --accent-soft: #fde6d6;
  --accent-ink: #a4461a;
  --stage: #a5cece;
  --stage-deep: #3e8a8b;
  --success: #1d6b58;
  --success-soft: #dcefe8;
  --warning: #875400;
  --warning-soft: #f8e9c8;
  --danger: #a8241f;
  --danger-hover: #8c1d19;
  --on-danger: #ffffff;
  --danger-soft: #f8dedb;
  --focus: #a4461a;
  --scrim: rgba(23, 19, 16, 0.56);
  --media-scrim: rgba(23, 19, 16, 0.62);
  --on-media: #ffffff;
  --shadow-1: 0 1px 2px rgba(42, 33, 26, 0.06), 0 1px 1px rgba(42, 33, 26, 0.04);
  --shadow-2: 0 4px 12px rgba(42, 33, 26, 0.10), 0 1px 3px rgba(42, 33, 26, 0.08);
  --shadow-3: 0 12px 32px rgba(42, 33, 26, 0.16), 0 2px 6px rgba(42, 33, 26, 0.08);
}

/* Dark: follows the system unless the page sets data-theme="light". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171310;
    --surface: #211c18;
    --surface-raised: #2b2520;
    --surface-sunken: #120f0d;
    --line: #3a322b;
    --line-strong: #8e8070;
    --ink: #f4ede3;
    --ink-muted: #bbac99;
    --accent: #f27b35;
    --accent-hover: #f58f53;
    --on-accent: #2a1608;
    --accent-soft: #3d2416;
    --accent-ink: #f7a26d;
    --stage: #1f4a4a;
    --stage-deep: #3e8a8b;
    --success: #72c7aa;
    --success-soft: #16302a;
    --warning: #e8b85c;
    --warning-soft: #33280f;
    --danger: #f4877c;
    --danger-hover: #f8a097;
    --on-danger: #2b0e0b;
    --danger-soft: #3b1c1a;
    --focus: #f7a26d;
    --scrim: rgba(0, 0, 0, 0.64);
    --media-scrim: rgba(23, 19, 16, 0.62);
    --on-media: #ffffff;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 12px 36px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  --paper: #171310;
  --surface: #211c18;
  --surface-raised: #2b2520;
  --surface-sunken: #120f0d;
  --line: #3a322b;
  --line-strong: #8e8070;
  --ink: #f4ede3;
  --ink-muted: #bbac99;
  --accent: #f27b35;
  --accent-hover: #f58f53;
  --on-accent: #2a1608;
  --accent-soft: #3d2416;
  --accent-ink: #f7a26d;
  --stage: #1f4a4a;
  --stage-deep: #3e8a8b;
  --success: #72c7aa;
  --success-soft: #16302a;
  --warning: #e8b85c;
  --warning-soft: #33280f;
  --danger: #f4877c;
  --danger-hover: #f8a097;
  --on-danger: #2b0e0b;
  --danger-soft: #3b1c1a;
  --focus: #f7a26d;
  --scrim: rgba(0, 0, 0, 0.64);
  --media-scrim: rgba(23, 19, 16, 0.62);
  --on-media: #ffffff;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 12px 36px rgba(0, 0, 0, 0.6);
}