/* Softspace Forms design tokens (ARCHITECTURE section 13).
   Three-state theme: :root = light; system dark unless data-theme="light"; data-theme="dark" always wins.
   Colour pairs that carry text are held to WCAG AA 4.5:1; --ss-line-strong and --ss-focus to 1.4.11 3:1. */
:root {
  --ss-primary: #18181b;
  --ss-primary-600: #09090b;
  --ss-primary-50: #f4f4f5;
  --ss-primary-100: #e4e4e7;
  --ss-primary-ink: #fafafa;

  --ss-ink: #09090b;
  --ss-ink-2: #3f3f46;
  --ss-muted: #71717a;
  --ss-line: #e4e4e7;
  --ss-line-strong: #71717a;
  --ss-bg: #fafafa;
  --ss-surface: #ffffff;
  --ss-surface-2: #f4f4f5;
  --ss-surface-3: #e4e4e7;

  --ss-ok: #1f8a5b;
  --ss-ok-bg: #e6f5ee;
  --ss-warn: #b7791f;
  --ss-warn-bg: #fbf1df;
  --ss-err: #c8322f;
  --ss-err-bg: #fbe8e7;
  --ss-err-ink: #ffffff;
  --ss-info: #2b6cb0;
  --ss-info-bg: #e6f0fa;

  --ss-r-sm: 6px;
  --ss-r: 8px;
  --ss-r-lg: 12px;

  --ss-shadow-sm: 0 1px 2px rgba(22, 22, 29, 0.06);
  --ss-shadow: 0 4px 16px rgba(22, 22, 29, 0.08), 0 1px 3px rgba(22, 22, 29, 0.06);
  --ss-shadow-lg: 0 16px 48px rgba(22, 22, 29, 0.16), 0 2px 8px rgba(22, 22, 29, 0.08);
  /* Solid two-layer ring: surface-coloured spacer then an opaque primary ring, so the
     indicator itself clears 3:1 against both the control and the page (SC 2.4.11). */
  --ss-focus: 0 0 0 2px var(--ss-surface), 0 0 0 4px var(--ss-primary);
  /* The chevron is baked into a data URI, so it cannot read a colour token at
     paint time - it has to BE one, set per theme. Tracks --ss-muted. */
  --ss-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --ss-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ss-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ss-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ss-sidebar-w: 248px;
  --ss-sidebar-rail: 72px;
  --ss-dur: .16s;
  --ss-dur-slow: .26s;
  --ss-ease: cubic-bezier(.4, 0, .2, 1);
  --ss-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ss-topbar-h: 60px;
  --ss-content-max: 1280px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ss-primary: #fafafa;
    --ss-primary-600: #ffffff;
    --ss-primary-50: #27272a;
    --ss-primary-100: #3f3f46;
    /* Dark theme keeps the light lilac fill, so text on it must be dark ink (6.29:1). */
    --ss-primary-ink: #18181b;

    --ss-ink: #fafafa;
    --ss-ink-2: #d4d4d8;
    --ss-muted: #a1a1aa;
    --ss-line: #27272a;
    --ss-line-strong: #71717a;
    --ss-bg: #09090b;
    --ss-surface: #18181b;
    --ss-surface-2: #27272a;
    --ss-surface-3: #3f3f46;

    --ss-ok: #3fb984;
    --ss-ok-bg: #12301f;
    --ss-warn: #d9a441;
    --ss-warn-bg: #332711;
    --ss-err: #e5605d;
    --ss-err-bg: #391616;
    --ss-err-ink: #16161d;
    --ss-info: #6ea8e6;
    --ss-info-bg: #16273a;

    --ss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ss-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
    --ss-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    --ss-focus: 0 0 0 2px var(--ss-surface), 0 0 0 4px var(--ss-primary);
    /* The chevron is baked into a data URI, so it cannot read a colour token at
       paint time - it has to BE one, set per theme. Tracks --ss-muted. */
    --ss-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ss-primary: #fafafa;
  --ss-primary-600: #ffffff;
  --ss-primary-50: #27272a;
  --ss-primary-100: #3f3f46;
  --ss-primary-ink: #18181b;

  --ss-ink: #fafafa;
  --ss-ink-2: #d4d4d8;
  --ss-muted: #a1a1aa;
  --ss-line: #27272a;
  --ss-line-strong: #71717a;
  --ss-bg: #09090b;
  --ss-surface: #18181b;
  --ss-surface-2: #27272a;
  --ss-surface-3: #3f3f46;

  --ss-ok: #3fb984;
  --ss-ok-bg: #12301f;
  --ss-warn: #d9a441;
  --ss-warn-bg: #332711;
  --ss-err: #e5605d;
  --ss-err-bg: #391616;
  --ss-err-ink: #16161d;
  --ss-info: #6ea8e6;
  --ss-info-bg: #16273a;

  --ss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ss-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
  --ss-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
  --ss-focus: 0 0 0 2px var(--ss-surface), 0 0 0 4px var(--ss-primary);
  /* The chevron is baked into a data URI, so it cannot read a colour token at
     paint time - it has to BE one, set per theme. Tracks --ss-muted. */
  --ss-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  color-scheme: dark;
}