/* Pulse SoT — @ogs/pulse tokens (ported dark/light from ogs_pulse_design_system) */
/* Obsidian / slate / ice; cyan reserved for live/system only */

:root {
  --brand-accent: #00d9ff;
  --brand-ice: #fcfdfe;
  --brand-frost: #e9ebee;
  --brand-slate: #475569;
  --brand-obsidian: #0f172a;
  --radius: 6px;

  --border-width: 0.5px;
  --border-width-raised: 1px;

  --tile-padding-x: 1rem;
  --tile-padding-y: 1rem;
  --inset-divider-inset: 1rem;
  --list-row-padding-y: 0.625rem;

  --focus-color: var(--accent-stroke);
  --focus-offset: 2px;

  --accent-stroke: rgba(0, 243, 255, 0.4);
  --accent-glow: 0 0 12px 0 rgba(0, 243, 255, 0.15);
  --indicator-live: var(--brand-accent);
  --indicator-system: var(--brand-accent);

  --status-success: #4ade80;
  --status-success-bg: rgba(74, 222, 128, 0.1);
  --status-warn: #b45309;
  --status-warn-bg: rgba(180, 83, 9, 0.1);
  --status-danger: #ef4444;
  --status-danger-bg: rgba(239, 68, 68, 0.1);

  --sans: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;

  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;
  --duration-friction: 250ms;

  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-expressive: cubic-bezier(0.4, 0, 0.2, 1);

  /* Aliases used by slim consumers */
  --obsidian: var(--brand-obsidian);
  --frost: var(--brand-frost);
  --ice: var(--brand-ice);
  --cyan: var(--brand-accent);
  --tile: #1e293b;
}

/* Default appearance follows dark (Pulse chrome is dark-first). */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--brand-obsidian);
  --surface: #162032;
  --surface-2: #1e293b;
  --surface-3: #334155;
  --chrome-bg: var(--brand-obsidian);
  --chrome-text: var(--brand-ice);
  --cap-bg: #162032;
  --tile-bg: #1a2332;

  --text: var(--brand-ice);
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --muted: var(--text-secondary);
  --mono-muted: #94a3b8;
  --fg: var(--text);

  --btn-primary: var(--brand-obsidian);
  --btn-primary-text: var(--brand-ice);

  --elevate-border: color-mix(in srgb, var(--text-secondary) 12%, transparent);
  --elevate-border-raised: color-mix(in srgb, var(--text-secondary) 20%, transparent);
  --border-subtle: var(--elevate-border);
  --border: var(--border-subtle);
  --tile-bg-nested: color-mix(in srgb, var(--surface) 88%, var(--bg));
  --elevate-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.45);
  --elevate-inset: inset 0 var(--border-width) 0 0 rgba(255, 255, 255, 0.025);
  --elevate-2: var(--elevate-inset), var(--elevate-shadow);
  --elevate-3: var(--elevate-inset), 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.4);

  --code-bg: var(--surface-2);
  --accent: var(--brand-accent);

  --status-success: #4ade80;
  --status-success-bg: rgba(74, 222, 128, 0.1);
  --status-warn: #d97706;
  --status-warn-bg: rgba(180, 83, 9, 0.12);
  --status-danger: #f87171;
  --status-danger-bg: rgba(239, 68, 68, 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: var(--brand-frost);
    --surface: var(--brand-ice);
    --surface-2: #cbd5e1;
    --surface-3: #94a3b8;
    --chrome-bg: var(--brand-obsidian);
    --chrome-text: var(--brand-ice);
    --cap-bg: var(--brand-obsidian);
    --tile-bg: var(--brand-ice);

    --text: var(--brand-obsidian);
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --muted: var(--text-secondary);
    --mono-muted: #64748b;
    --fg: var(--text);

    --btn-primary: var(--brand-obsidian);
    --btn-primary-text: var(--brand-ice);

    --elevate-border: color-mix(in srgb, var(--brand-slate) 13%, transparent);
    --elevate-border-raised: color-mix(in srgb, var(--brand-slate) 20%, transparent);
    --border-subtle: var(--elevate-border);
    --border: var(--border-subtle);
    --tile-bg-nested: color-mix(in srgb, var(--brand-frost) 72%, var(--brand-ice));
    --elevate-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.18);
    --elevate-inset: inset 0 var(--border-width) 0 0 rgba(255, 255, 255, 0.28);
    --elevate-2: var(--elevate-inset), var(--elevate-shadow);
    --elevate-3: var(--elevate-inset), 0 16px 40px -10px rgba(15, 23, 42, 0.28), 0 6px 16px -6px rgba(15, 23, 42, 0.16);

    --code-bg: #f3f4f6;
    --accent: #0284c7;

    --status-success: #0a5c46;
    --status-success-bg: rgba(10, 92, 70, 0.08);
    --status-warn: #b45309;
    --status-warn-bg: rgba(180, 83, 9, 0.1);
    --status-danger: #dc2626;
    --status-danger-bg: rgba(239, 68, 68, 0.1);
  }
}

[data-theme="light"] {
  color-scheme: light;
  --bg: var(--brand-frost);
  --surface: var(--brand-ice);
  --surface-2: #cbd5e1;
  --surface-3: #94a3b8;
  --chrome-bg: var(--brand-obsidian);
  --chrome-text: var(--brand-ice);
  --cap-bg: var(--brand-obsidian);
  --tile-bg: var(--brand-ice);

  --text: var(--brand-obsidian);
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --muted: var(--text-secondary);
  --mono-muted: #64748b;
  --fg: var(--text);

  --btn-primary: var(--brand-obsidian);
  --btn-primary-text: var(--brand-ice);

  --elevate-border: color-mix(in srgb, var(--brand-slate) 13%, transparent);
  --elevate-border-raised: color-mix(in srgb, var(--brand-slate) 20%, transparent);
  --border-subtle: var(--elevate-border);
  --border: var(--border-subtle);
  --tile-bg-nested: color-mix(in srgb, var(--brand-frost) 72%, var(--brand-ice));
  --elevate-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.18);
  --elevate-inset: inset 0 var(--border-width) 0 0 rgba(255, 255, 255, 0.28);
  --elevate-2: var(--elevate-inset), var(--elevate-shadow);
  --elevate-3: var(--elevate-inset), 0 16px 40px -10px rgba(15, 23, 42, 0.28), 0 6px 16px -6px rgba(15, 23, 42, 0.16);

  --code-bg: #f3f4f6;
  --accent: #0284c7;

  --status-success: #0a5c46;
  --status-success-bg: rgba(10, 92, 70, 0.08);
  --status-warn: #b45309;
  --status-warn-bg: rgba(180, 83, 9, 0.1);
  --status-danger: #dc2626;
  --status-danger-bg: rgba(239, 68, 68, 0.1);
}