@layer base, components;

@layer base {
:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
  --bg: #eceef4;
  --ink: #14161c;
  --hint: #666b7a;
  --accent: #2f6bf5;
  --accent-fill: #2f6bf5;
  --accent-ink: #fff;
  --plate: rgb(255 255 255 / 60%);
  --line: rgb(20 22 28 / 7%);
  --danger: #d6343a;
  --warn: #d9921a;
  --ok: #30b158;
  --glass: rgb(255 255 255 / 68%);
  --glass-strong: rgb(251 252 254);
  --glass-edge: rgb(255 255 255 / 85%);
  --shadow-glass: 0 1px 2px rgb(30 40 60 / 4%), 0 10px 30px rgb(30 45 80 / 9%);
  --glow-1: rgb(176 226 208 / 75%);
  --glow-2: rgb(255 228 182 / 75%);
  --glow-3: rgb(176 196 242 / 70%);
  --glow-4: rgb(248 196 214 / 60%);
  --pastel-1: rgb(248 196 214 / 55%);
  --pastel-2: rgb(180 232 220 / 55%);
  --pastel-3: rgb(196 204 255 / 55%);
  --pastel-4: rgb(255 222 196 / 60%);
  --pastel-5: rgb(184 214 255 / 55%);
  --grad: linear-gradient(120deg, #2a62f2 0%, #3f7cff 60%, #6b9dff 100%);
  --grad-cool: linear-gradient(135deg, #f7c2cf 0%, #fbe0c6 35%, #c8dbff 70%, #b8ebe2 100%);
  --tint-lilac: linear-gradient(135deg, #e6ecff 0%, #ccd9ff 100%);
  --button-off: #dde4f2;
  --tint-lilac-ink: #2f6bf5;
  --tint-peach: linear-gradient(135deg, #ffece0 0%, #fbd2bf 100%);
  --tint-peach-ink: #df774f;
  --tint-sky: linear-gradient(135deg, #e0f6f1 0%, #bfe8de 100%);
  --tint-sky-ink: #1f9a82;
  --eyebrow-ink: #17695c;
  --tint-mint: linear-gradient(135deg, #e3f7e8 0%, #c2ebcd 100%);
  --tint-mint-ink: var(--ok);
  --shadow-accent: rgb(47 107 245 / 28%);
  --overlay: rgb(20 28 45 / 22%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius: 12px;
  --radius-checkbox: 6px;
  --row-min-height: 56px;
  --gutter: var(--space-4);
  --checkbox-size: 22px;
  --hit: 48px;
  --button-height: 52px;
  --button-font: 16px;
  --button-weight: 600;
  --control-font: 13px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --radius-tile: 20px;
  --radius-small: 6px;
  --danger-solid: #d6343a;
  --inset: 16px;
  --mic: 30px;
  --epic-action: 40px;
  --text-offset: calc(var(--hit) - 11px + var(--space-3));
  --shadow-panel: 0 -1px 12px rgb(0 0 0 / 8%);
  --shadow-sheet: 0 -12px 40px rgb(30 40 70 / 12%);
  --shadow-float: 0 4px 14px rgb(20 30 60 / 35%);
  --scrim: rgb(0 0 0 / 35%);
  --scrim-light: rgb(0 0 0 / 12%);
  --scrim-dialog: rgb(10 12 18 / 45%);
  --scrim-viewer: rgb(0 0 0 / 98%);
  --mask: #000;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --motion: 200ms;
  --motion-fast: 150ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0f14;
    --ink: #f1f3f8;
    --hint: #929aab;
    --accent: #6f9bff;
    --accent-ink: #fff;
    --plate: rgb(255 255 255 / 6%);
    --line: rgb(255 255 255 / 8%);
    --danger: #ff6b6b;
    --warn: #ffb547;
    --glass: rgb(30 34 46 / 62%);
    --glass-strong: rgb(26 30 40);
    --glass-edge: rgb(255 255 255 / 8%);
    --shadow-glass: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 30px rgb(0 0 0 / 35%);
    --glow-1: rgb(52 160 140 / 20%);
    --glow-2: rgb(230 170 90 / 12%);
    --glow-3: rgb(70 110 230 / 24%);
    --glow-4: rgb(220 110 160 / 12%);
    --pastel-1: rgb(240 120 170 / 12%);
    --pastel-2: rgb(80 200 170 / 12%);
    --pastel-3: rgb(130 140 255 / 14%);
    --pastel-4: rgb(255 160 110 / 12%);
    --pastel-5: rgb(90 150 255 / 14%);
    --tint-lilac: rgb(111 155 255 / 18%);
    --button-off: #232a3d;
    --tint-lilac-ink: #a9c3ff;
    --tint-peach: rgb(255 150 110 / 16%);
    --tint-peach-ink: #ffb08f;
    --tint-sky: rgb(80 200 170 / 16%);
    --tint-sky-ink: #86e0c8;
    --eyebrow-ink: #86e0c8;
    --tint-mint: rgb(76 217 123 / 16%);
    --tint-mint-ink: var(--ok);
    --shadow-accent: rgb(47 107 245 / 34%);
    --overlay: rgb(0 0 0 / 40%);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0d0f14;
  --ink: #f1f3f8;
  --hint: #929aab;
  --accent: #6f9bff;
  --accent-ink: #fff;
  --plate: rgb(255 255 255 / 6%);
  --line: rgb(255 255 255 / 8%);
  --danger: #ff6b6b;
  --ok: #4cd97b;
  --warn: #ffb547;
  --glass: rgb(30 34 46 / 62%);
  --glass-strong: rgb(26 30 40);
  --glass-edge: rgb(255 255 255 / 8%);
  --shadow-glass: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 30px rgb(0 0 0 / 35%);
  --glow-1: rgb(52 160 140 / 20%);
  --glow-2: rgb(230 170 90 / 12%);
  --glow-3: rgb(70 110 230 / 24%);
  --glow-4: rgb(220 110 160 / 12%);
  --pastel-1: rgb(240 120 170 / 12%);
  --pastel-2: rgb(80 200 170 / 12%);
  --pastel-3: rgb(130 140 255 / 14%);
  --pastel-4: rgb(255 160 110 / 12%);
  --pastel-5: rgb(90 150 255 / 14%);
  --tint-lilac: rgb(111 155 255 / 18%);
  --button-off: #232a3d;
  --tint-lilac-ink: #a9c3ff;
  --tint-peach: rgb(255 150 110 / 16%);
  --tint-peach-ink: #ffb08f;
  --tint-sky: rgb(80 200 170 / 16%);
  --tint-sky-ink: #86e0c8;
  --eyebrow-ink: #86e0c8;
  --tint-mint: rgb(76 217 123 / 16%);
  --tint-mint-ink: var(--ok);
  --shadow-accent: rgb(47 107 245 / 34%);
  --overlay: rgb(0 0 0 / 40%);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 1ms;
    --motion-fast: 1ms;
  }
}
}

:root {
  --radius-glass: 24px;
  --radius-sheet: 28px;
  --blur: blur(22px) saturate(170%);
  --spring: cubic-bezier(0.32, 1.28, 0.5, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-screen: 260ms;
  --motion-sheet: 360ms;
  --motion-leave: 200ms;
  --motion-fade: 180ms;
  --press: scale(0.97);
  --stagger: 18ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-screen: 1ms;
    --motion-sheet: 1ms;
    --motion-leave: 1ms;
    --stagger: 0ms;
  }
}