/* src/theme/tokens.css */
:root,
[data-theme=dark] {
  --bg:#05070D;
  --surface:#0E1320;
  --surface-2:#161D2E;
  --surface-3:#1F2738;
  --fg:#EAF0F8;
  --fg-muted:#8A97AD;
  --border:#212A3D;
  --border-strong:#2F3A52;
  --accent:#22D3EE;
  --accent-2:#2DD4BF;
  --accent-3:#818CF8;
  --on-accent:#04060C;
  --accent-grad:
    linear-gradient(
      135deg,
      #2DD4BF 0%,
      #22D3EE 45%,
      #818CF8 100%);
  --accent-grad-text:
    linear-gradient(
      120deg,
      #5EEAD4 0%,
      #67E8F9 50%,
      #A5B4FC 100%);
  --danger:#FB7185;
  --success:#34D399;
  --canvas-glow:
    radial-gradient(
      48rem 48rem at 100% -8%,
      rgba(129,140,248,0.12),
      transparent 60%),
    radial-gradient(
      40rem 40rem at -8% 108%,
      rgba(34,211,238,0.09),
      transparent 60%);
  --glow: 0 0 22px rgba(34,211,238,0.30);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-3: 0 18px 50px rgba(0,0,0,0.55);
  --radius:12px;
  --radius-lg:16px;
  --radius-pill:999px;
  --tap:44px;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:10px;
  --sp-4:13px;
  --sp-6:18px;
  --sp-8:22px;
  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-lg:1.0625rem;
  --text-xl:1.25rem;
  --text-2xl:1.5rem;
  --text-3xl:1.875rem;
  --font:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  --motion-fast:120ms;
  --motion:220ms;
  --ease:cubic-bezier(0.4,0,0.2,1);
}
[data-theme=light] {
  --bg:#FBFCFE;
  --surface:#FFFFFF;
  --surface-2:#F1F5F9;
  --surface-3:#E7EEF6;
  --fg:#0B1220;
  --fg-muted:#566377;
  --border:#E2E8F0;
  --border-strong:#C7D2E0;
  --accent:#0891B2;
  --accent-2:#0D9488;
  --accent-3:#6366F1;
  --on-accent:#FFFFFF;
  --accent-grad:
    linear-gradient(
      135deg,
      #0D9488 0%,
      #0891B2 45%,
      #6366F1 100%);
  --accent-grad-text:
    linear-gradient(
      120deg,
      #0D9488 0%,
      #0891B2 50%,
      #6366F1 100%);
  --danger:#DC2626;
  --success:#16A34A;
  --canvas-glow: none;
  --glow: 0 0 0 rgba(0,0,0,0);
  --shadow-1: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-2: 0 8px 24px rgba(15,23,42,0.10);
  --shadow-3: 0 18px 50px rgba(15,23,42,0.14);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--bg);
  background-image: var(--canvas-glow);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
button {
  font: inherit;
  cursor: pointer;
}
h1,
h2,
h3 {
  letter-spacing: -0.015em;
}
.gradient-text {
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
button,
a,
input,
textarea,
select,
[role=button],
[tabindex] {
  transition:
    background-color var(--motion) var(--ease),
    border-color var(--motion) var(--ease),
    box-shadow var(--motion) var(--ease),
    transform var(--motion-fast) var(--ease),
    color var(--motion) var(--ease);
}
button:active,
[role=button]:active {
  transform: scale(0.97);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.20);
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection {
  background: rgba(34, 211, 238, 0.30);
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 540px) {
  .editor-actions {
    justify-content: space-between;
  }
  .editor-actions .action-label {
    display: none;
  }
  .editor-actions .editor-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.preview-skeleton {
  background:
    linear-gradient(
      100deg,
      var(--surface) 40%,
      var(--surface-2) 50%,
      var(--surface) 60%);
  background-size: 200% 100%;
  animation: preview-shimmer 1.2s linear infinite;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
@keyframes preview-shimmer {
  to {
    background-position: -200% 0;
  }
}
/*# sourceMappingURL=app.css.map */