/* SurveyStream colour system v1.0.0
 * Interlocking Loop / Active Signal
 * Generated — every pair validated to WCAG 2.1 (56 checks, 0 failures).
 * Three theme states are handled: bare :root (light), prefers-color-scheme,
 * and an explicit [data-theme] stamp. Never declare a colour only inside a
 * media or [data-theme] block.
 */

:root {
  /* ---- primitives: reference only, do not use in components ---- */
    --ss-c-deepwater-950: #04171F;
    --ss-c-deepwater-900: #08222E;
    --ss-c-deepwater-800: #0D2E3D;
    --ss-c-deepwater-700: #064A5B;
    --ss-c-deepwater-600: #085A6E;
    --ss-c-deepwater-500: #0A6E86;
    --ss-c-stream-600: #0BA3B7;
    --ss-c-stream-500: #10BBD1;
    --ss-c-stream-400: #3ACFE1;
    --ss-c-stream-300: #5FE3EC;
    --ss-c-pulse-700: #0E7A62;
    --ss-c-pulse-600: #12987A;
    --ss-c-pulse-500: #2FE3A2;
    --ss-c-pulse-400: #6BF3C0;
    --ss-c-payout-700: #8A4E08;
    --ss-c-payout-600: #C77A1E;
    --ss-c-payout-500: #F2A23C;
    --ss-c-payout-400: #F7BE73;
    --ss-c-neutral-50: #F4F8F9;
    --ss-c-neutral-200: #D3E0E2;
    --ss-c-neutral-400: #8199A0;
    --ss-c-neutral-500: #758D94;
    --ss-c-neutral-600: #566A70;
    --ss-c-neutral-800: #2E4A55;
    --ss-c-neutral-950: #04171F;
    --ss-c-divider-dark: #1C3440;
    --ss-c-border-dark: #4E7687;
    --ss-c-success-700: #155F44;
    --ss-c-success-600: #1B7A57;
    --ss-c-success-500: #2E9E6B;
    --ss-c-success-400: #4FD69A;
    --ss-c-warn-700: #84480C;
    --ss-c-warn-600: #A85B10;
    --ss-c-warn-500: #DE8A2A;
    --ss-c-warn-400: #F0B45E;
    --ss-c-error-700: #87261F;
    --ss-c-error-600: #A82F27;
    --ss-c-error-500: #CF463D;
    --ss-c-error-400: #F0847B;
    --ss-c-white: #FFFFFF;
    --ss-c-ink: #04171F;
    --ss-c-mist: #EDF3F4;
    --ss-c-text-sec-dark: #AEC4C9;
    --ss-c-text-mut-dark: #7E969C;

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

  color-scheme: light dark;
}

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

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

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

/* ---- baseline application ---- */
body {
  background: var(--ss-bg-canvas);
  color: var(--ss-text-primary);
}

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

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

/* Amber fills need an explicit edge in light mode to clear SC 1.4.11 */
.ss-badge-payout {
  background: var(--ss-fill-payout);
  border: 1px solid var(--ss-fill-payout-edge);
  color: var(--ss-text-on-accent);
}