/* ============================================================
 * SurveyStream — design tokens as CSS custom properties
 * Generated from tokens/design-tokens.json. Do not hand-edit.
 *
 * Dark mode is applied by any of three mechanisms, and all three are
 * handled here because a real product needs all three:
 *   1. prefers-color-scheme          the visitor's OS setting
 *   2. [data-theme="dark"|"light"]   an explicit in-product choice
 *   3. .dark / .light                Tailwind's darkMode: 'class'
 *
 * The media query is guarded so an explicit light choice still wins over a
 * dark OS. Never declare a colour only inside a media or [data-theme] block:
 * the un-stamped state is the one most visitors are in.
 * ============================================================ */

:root {
  color-scheme: light dark;

  /* ---------- primitives (theme-agnostic) ---------- */
  --color-deepwater-500: #0A6E86;
  --color-deepwater-600: #085A6E;
  --color-deepwater-700: #064A5B;
  --color-deepwater-800: #0D2E3D;
  --color-deepwater-900: #08222E;
  --color-deepwater-950: #04171F;
  --color-stream-300: #5FE3EC;
  --color-stream-400: #3ACFE1;
  --color-stream-500: #10BBD1;
  --color-stream-600: #0BA3B7;
  --color-pulse-400: #6BF3C0;
  --color-pulse-500: #2FE3A2;
  --color-pulse-600: #12987A;
  --color-pulse-700: #0E7A62;
  --color-payout-400: #F7BE73;
  --color-payout-500: #F2A23C;
  --color-payout-600: #C77A1E;
  --color-payout-700: #8A4E08;
  --color-neutral-50: #F4F8F9;
  --color-neutral-200: #D3E0E2;
  --color-neutral-400: #8199A0;
  --color-neutral-500: #758D94;
  --color-neutral-600: #566A70;
  --color-neutral-800: #2E4A55;
  --color-neutral-950: #04171F;
  --color-success-400: #4FD69A;
  --color-success-500: #2E9E6B;
  --color-success-600: #1B7A57;
  --color-success-700: #155F44;
  --color-warn-400: #F0B45E;
  --color-warn-500: #DE8A2A;
  --color-warn-600: #A85B10;
  --color-warn-700: #84480C;
  --color-error-400: #F0847B;
  --color-error-500: #CF463D;
  --color-error-600: #A82F27;
  --color-error-700: #87261F;
  --color-slate-100: #EDF3F4;
  --color-slate-300: #AEC4C9;
  --color-slate-400: #7E969C;
  --color-slate-500: #4E7687;
  --color-slate-600: #3F6273;
  --color-slate-800: #1C3440;
  --color-slate-900: #020E14;
  --color-base-white: #FFFFFF;
  --color-base-black: #000000;

  /* ---------- typography ---------- */
  --font-display: Archivo, "Archivo Fallback", "Helvetica Neue", "Arial Nova", Helvetica, Arial, system-ui, sans-serif;
  --font-sans: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "JBM Fallback", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

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

  --text-caption: 0.8125rem;
  --leading-caption: 20px;
  --tracking-caption: 0.0100em;
  --text-body: 1rem;
  --leading-body: 24px;
  --tracking-body: 0.0030em;
  --text-body-lg: 1.1875rem;
  --leading-body-lg: 28px;
  --tracking-body-lg: -0.0028em;
  --text-title: 1.4375rem;
  --leading-title: 32px;
  --tracking-title: -0.0092em;
  --text-h3: 1.75rem;
  --leading-h3: 36px;
  --tracking-h3: -0.0158em;
  --text-h2: 2.0625rem;
  --leading-h2: 40px;
  --tracking-h2: -0.0214em;
  --text-h1: 2.5rem;
  --leading-h1: 44px;
  --tracking-h1: -0.0279em;
  --text-display: 3rem;
  --leading-display: 52px;
  --tracking-display: -0.0340em;
  --text-body-dense: 0.875rem;
  --leading-body-dense: 20px;
  --tracking-body-dense: 0.0058em;
  --text-display-xl: 4rem;
  --leading-display-xl: 68px;
  --tracking-display-xl: -0.0392em;

  /* ---------- spacing (4px grid) ---------- */
  --space-0: 0px;
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-px: 1px;
  --space-0_5: 2px;
  --space-1_5: 6px;

  /* ---------- radii ---------- */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-3xl: 22px;
  --radius-full: 9999px;

  /* ---------- border widths ---------- */
  --border-none: 0px;
  --border-hairline: 1px;
  --border-thick: 2px;
  --border-focus: 2px;

  /* ---------- motion ---------- */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --duration-deliberate: 400ms;
  --duration-drift: 60000ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasised: cubic-bezier(0.2, 0, 0, 1);
  --ease-linear: cubic-bezier(0, 0, 1, 1);
  --transition-base: 180ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-enter: 260ms cubic-bezier(0, 0, 0.2, 1);
  --transition-exit: 120ms cubic-bezier(0.4, 0, 1, 1);
  --transition-emphasised: 400ms cubic-bezier(0.2, 0, 0, 1);

  /* ---------- semantic: LIGHT ---------- */
  --color-bg-canvas: #F4F8F9;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken: #D3E0E2;
  --color-text-primary: #04171F;
  --color-text-secondary: #2E4A55;
  --color-text-muted: #566A70;
  --color-text-disabled: #8199A0;
  --color-text-link: #0A6E86;
  --color-text-on-brand: #FFFFFF;
  --color-text-on-accent: #04171F;
  --color-text-on-interactive: #FFFFFF;
  --color-border-subtle: #D3E0E2;
  --color-border-default: #758D94;
  --color-interactive: #0A6E86;
  --color-interactive-hover: #085A6E;
  --color-interactive-active: #064A5B;
  --color-interactive-disabled: #D3E0E2;
  --color-focus-ring: #0A6E86;
  --color-feedback-success: #1B7A57;
  --color-feedback-payout: #8A4E08;
  --color-feedback-warning: #A85B10;
  --color-feedback-error: #A82F27;
  --color-fill-success: #2E9E6B;
  --color-fill-payout: #F2A23C;
  --color-fill-payout-edge: #C77A1E;
  --color-fill-error: #CF463D;

  /* ---------- elevation: LIGHT ---------- */
  --shadow-xs: 0px 1px 2px 0px rgba(4,23,31,0.06);
  --shadow-sm: 0px 1px 2px 0px rgba(4,23,31,0.08), 0px 8px 24px -8px rgba(4,23,31,0.16);
  --shadow-md: 0px 2px 4px -1px rgba(4,23,31,0.08), 0px 14px 36px -16px rgba(4,23,31,0.22);
  --shadow-lg: 0px 4px 8px -2px rgba(4,23,31,0.10), 0px 20px 50px -24px rgba(4,23,31,0.42);
  --shadow-xl: 0px 8px 16px -4px rgba(4,23,31,0.12), 0px 28px 70px -26px rgba(2,10,16,0.50);
}

/* ============ dark: system preference ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
  --color-bg-canvas: #04171F;
  --color-bg-surface: #08222E;
  --color-bg-elevated: #0D2E3D;
  --color-bg-sunken: #020E14;
  --color-text-primary: #EDF3F4;
  --color-text-secondary: #AEC4C9;
  --color-text-muted: #7E969C;
  --color-text-disabled: #3F6273;
  --color-text-link: #5FE3EC;
  --color-text-on-brand: #FFFFFF;
  --color-text-on-accent: #04171F;
  --color-text-on-interactive: #04171F;
  --color-border-subtle: #1C3440;
  --color-border-default: #4E7687;
  --color-interactive: #10BBD1;
  --color-interactive-hover: #3ACFE1;
  --color-interactive-active: #0BA3B7;
  --color-interactive-disabled: #1C3440;
  --color-focus-ring: #5FE3EC;
  --color-feedback-success: #4FD69A;
  --color-feedback-payout: #F2A23C;
  --color-feedback-warning: #F0B45E;
  --color-feedback-error: #F0847B;
  --color-fill-success: #2E9E6B;
  --color-fill-payout: #F2A23C;
  --color-fill-payout-edge: #F2A23C;
  --color-fill-error: #CF463D;

  --shadow-xs: 0px 1px 2px 0px rgba(0,0,0,0.40);
  --shadow-sm: 0px 1px 2px 0px rgba(0,0,0,0.50), 0px 10px 30px -10px rgba(0,0,0,0.70);
  --shadow-md: 0px 2px 4px -1px rgba(0,0,0,0.50), 0px 16px 40px -18px rgba(0,0,0,0.75);
  --shadow-lg: 0px 4px 8px -2px rgba(0,0,0,0.55), 0px 20px 48px -26px rgba(0,0,0,0.78);
  --shadow-xl: 0px 8px 16px -4px rgba(0,0,0,0.60), 0px 28px 70px -26px rgba(0,0,0,0.85);
  }
}

/* ============ dark: explicit choice ============ */
:root[data-theme="dark"],
:root.dark,
.dark {
  --color-bg-canvas: #04171F;
  --color-bg-surface: #08222E;
  --color-bg-elevated: #0D2E3D;
  --color-bg-sunken: #020E14;
  --color-text-primary: #EDF3F4;
  --color-text-secondary: #AEC4C9;
  --color-text-muted: #7E969C;
  --color-text-disabled: #3F6273;
  --color-text-link: #5FE3EC;
  --color-text-on-brand: #FFFFFF;
  --color-text-on-accent: #04171F;
  --color-text-on-interactive: #04171F;
  --color-border-subtle: #1C3440;
  --color-border-default: #4E7687;
  --color-interactive: #10BBD1;
  --color-interactive-hover: #3ACFE1;
  --color-interactive-active: #0BA3B7;
  --color-interactive-disabled: #1C3440;
  --color-focus-ring: #5FE3EC;
  --color-feedback-success: #4FD69A;
  --color-feedback-payout: #F2A23C;
  --color-feedback-warning: #F0B45E;
  --color-feedback-error: #F0847B;
  --color-fill-success: #2E9E6B;
  --color-fill-payout: #F2A23C;
  --color-fill-payout-edge: #F2A23C;
  --color-fill-error: #CF463D;

  --shadow-xs: 0px 1px 2px 0px rgba(0,0,0,0.40);
  --shadow-sm: 0px 1px 2px 0px rgba(0,0,0,0.50), 0px 10px 30px -10px rgba(0,0,0,0.70);
  --shadow-md: 0px 2px 4px -1px rgba(0,0,0,0.50), 0px 16px 40px -18px rgba(0,0,0,0.75);
  --shadow-lg: 0px 4px 8px -2px rgba(0,0,0,0.55), 0px 20px 48px -26px rgba(0,0,0,0.78);
  --shadow-xl: 0px 8px 16px -4px rgba(0,0,0,0.60), 0px 28px 70px -26px rgba(0,0,0,0.85);
}

/* ============ light: explicit choice (beats a dark OS) ============ */
:root[data-theme="light"],
:root.light,
.light {
  --color-bg-canvas: #F4F8F9;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken: #D3E0E2;
  --color-text-primary: #04171F;
  --color-text-secondary: #2E4A55;
  --color-text-muted: #566A70;
  --color-text-disabled: #8199A0;
  --color-text-link: #0A6E86;
  --color-text-on-brand: #FFFFFF;
  --color-text-on-accent: #04171F;
  --color-text-on-interactive: #FFFFFF;
  --color-border-subtle: #D3E0E2;
  --color-border-default: #758D94;
  --color-interactive: #0A6E86;
  --color-interactive-hover: #085A6E;
  --color-interactive-active: #064A5B;
  --color-interactive-disabled: #D3E0E2;
  --color-focus-ring: #0A6E86;
  --color-feedback-success: #1B7A57;
  --color-feedback-payout: #8A4E08;
  --color-feedback-warning: #A85B10;
  --color-feedback-error: #A82F27;
  --color-fill-success: #2E9E6B;
  --color-fill-payout: #F2A23C;
  --color-fill-payout-edge: #C77A1E;
  --color-fill-error: #CF463D;

  --shadow-xs: 0px 1px 2px 0px rgba(4,23,31,0.06);
  --shadow-sm: 0px 1px 2px 0px rgba(4,23,31,0.08), 0px 8px 24px -8px rgba(4,23,31,0.16);
  --shadow-md: 0px 2px 4px -1px rgba(4,23,31,0.08), 0px 14px 36px -16px rgba(4,23,31,0.22);
  --shadow-lg: 0px 4px 8px -2px rgba(4,23,31,0.10), 0px 20px 50px -24px rgba(4,23,31,0.42);
  --shadow-xl: 0px 8px 16px -4px rgba(4,23,31,0.12), 0px 28px 70px -26px rgba(2,10,16,0.50);
}

/* ============ baseline application ============ */
body {
  background-color: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

:where(a) { color: var(--color-text-link); }

:where(:focus-visible) {
  outline: var(--border-focus) solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Amber fills measure 2.10:1 against white and have no discernible edge,
   so they carry a mandatory border. See BRAND-GUIDELINES.md §3.3. */
.ss-badge-payout {
  background-color: var(--color-fill-payout);
  border: var(--border-hairline) solid var(--color-fill-payout-edge);
  color: var(--color-text-on-accent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}