/* Solace Design Studio theme v1.1.0 - generated from tokens.json */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-VariableItalic.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --color-bg: #F6F3ED;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #E7ECFF;
  --color-surface-strong: #111827;
  --color-text: #111827;
  --color-text-muted: #596273;
  --color-text-inverse: #F6F3ED;
  --color-text-link: #3157D5;
  --color-border: #D8D3CA;
  --color-border-strong: #777E8A;
  --color-action: #3157D5;
  --color-action-hover: #2547B8;
  --color-action-active: #1E388F;
  --color-action-soft: #E7ECFF;
  --color-on-action: #FFFFFF;
  --color-accent: #7C8CFF;
  --color-highlight: #FFB37A;
  --color-on-highlight: #111827;
  --color-focus: #3157D5;
  --color-success: #19735B;
  --color-warning: #8A5200;
  --color-error: #B5473A;
  --color-info: #3157D5;
  --gradient-signal: linear-gradient(135deg, #3157D5 0%, #7C8CFF 100%);
  --gradient-calm: radial-gradient(circle at 78% 15%, rgb(124 140 255 / 18%), transparent 42%);

  --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; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px;
  --radius-xl: 32px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgb(17 24 39 / 8%);
  --shadow-sm: 0 8px 24px rgb(17 24 39 / 8%);
  --shadow-md: 0 18px 48px rgb(17 24 39 / 12%);
  --duration-instant: 120ms; --duration-fast: 180ms; --duration-base: 260ms; --duration-slow: 420ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-exit: cubic-bezier(.4, 0, 1, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0B1020;
  --color-surface: #121A2C;
  --color-surface-subtle: #19233A;
  --color-surface-strong: #F6F3ED;
  --color-text: #F6F3ED;
  --color-text-muted: #B6BDCC;
  --color-text-inverse: #111827;
  --color-text-link: #A7B3FF;
  --color-border: #2B3853;
  --color-border-strong: #66738D;
  --color-action: #8EA0FF;
  --color-action-hover: #A7B3FF;
  --color-action-active: #7C8CFF;
  --color-action-soft: #1A2B63;
  --color-on-action: #0B1020;
  --color-focus: #A7B3FF;
  --color-success: #6AD2AF;
  --color-warning: #F2B96B;
  --color-error: #FF9D91;
  --color-info: #A7B3FF;
}

html { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); }
body { margin: 0; background: var(--color-bg); color: var(--color-text); text-rendering: optimizeLegibility; }
::selection { background: var(--color-highlight); color: var(--color-on-highlight); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
a { color: var(--color-text-link); text-underline-offset: .12em; text-decoration-thickness: .08em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}