/* Soulservice design tokens — binding since UX1/2 (source of truth: docs/brand/cd.md).
   "Warm Amber": the system of the workshop deck and Jarvis II, prefix --ss-.

   Schemes: dark is the brand and the default; light ("paper") is the everyday
   variant. The active scheme is the `data-scheme` attribute on <html>, set
   before first paint by brand/scheme.js (stored choice, else the system
   preference). Without JavaScript the page is dark. Every colour token except
   the brand constants changes with the scheme; the amber does not. */

@import url("fonts.css");

:root {
  color-scheme: dark;

  /* Brand constants — the same in every scheme */
  --ss-amber: #d4a574;
  --ss-amber-light: #e8c9a0;
  --ss-amber-dark: #b08050;
  --ss-amber-deep: #8a6238; /* amber as text on paper: 5.6:1 */

  --ss-font-headline: "Sora", system-ui, sans-serif;
  --ss-font-body: "DM Sans", system-ui, sans-serif;
  --ss-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ss-fs-display: 2.5rem;
  --ss-fs-h1: 1.75rem;
  --ss-fs-h2: 1.25rem;
  --ss-fs-body: 1rem;
  --ss-fs-small: 0.875rem;
  --ss-fs-caption: 0.75rem;
  --ss-lh-tight: 1.2;
  --ss-lh-normal: 1.5;
  --ss-lh-relaxed: 1.7;
  --ss-tracking-label: 0.05em;

  --ss-space-xs: 0.25rem;
  --ss-space-sm: 0.5rem;
  --ss-space-md: 1rem;
  --ss-space-lg: 1.5rem;
  --ss-space-xl: 2rem;
  --ss-radius: 8px;
  --ss-radius-lg: 12px;
  --ss-radius-pill: 999px;

  /* State colours — for state only, never decoration */
  --ss-success: #5cb88c;
  --ss-warning: #d4a030;
  --ss-danger: #c85a5a;
  --ss-info: #7aa0c8;

  /* Scheme: dark (default, = Jarvis) */
  --ss-bg: #0f0f1a;
  --ss-bg-secondary: #1a1a2e;
  --ss-surface: #242438;
  --ss-elevated: #2e2e48;
  --ss-text: #f0ede8;
  --ss-text-secondary: #a8a4a0;
  --ss-text-muted: #6b6865;
  --ss-accent: var(--ss-amber);
  --ss-accent-hover: var(--ss-amber-light);
  --ss-accent-text: var(--ss-amber); /* amber as text: 7.9:1 on --ss-bg */
  --ss-on-accent: #0f0f1a;
  --ss-accent-subtle: rgba(212, 165, 116, 0.14);
  --ss-border: rgba(212, 165, 116, 0.18);
  --ss-border-strong: rgba(212, 165, 116, 0.4);
  --ss-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --ss-focus: 0 0 0 2px var(--ss-bg), 0 0 0 4px var(--ss-amber);
  --ss-soul-bubble: var(--ss-surface);
  --ss-user-bubble: var(--ss-elevated); /* neutral: amber is the Soul's (cd.md §8.2) */
}

:root[data-scheme="light"] {
  color-scheme: light;

  /* Scheme: light ("paper") — same amber, warm paper, ink text */
  --ss-bg: #f7f3ee;
  --ss-bg-secondary: #efe9e1;
  --ss-surface: #fffdfa;
  --ss-elevated: #f3ede5;
  --ss-text: #1a1826;
  --ss-text-secondary: #5c5852;
  --ss-text-muted: #8a857e;
  --ss-accent: var(--ss-amber);
  --ss-accent-hover: var(--ss-amber-dark);
  --ss-accent-text: var(--ss-amber-deep); /* pure amber on paper would be 2.2:1 */
  --ss-on-accent: #1a1826;
  --ss-accent-subtle: rgba(176, 128, 80, 0.12);
  --ss-border: rgba(176, 128, 80, 0.28);
  --ss-border-strong: rgba(176, 128, 80, 0.55);
  --ss-shadow: 0 4px 12px rgba(26, 24, 38, 0.08);
  --ss-focus: 0 0 0 2px var(--ss-bg), 0 0 0 4px var(--ss-amber-dark);
  --ss-soul-bubble: var(--ss-surface);
  --ss-user-bubble: var(--ss-elevated);
}

/* Wordmark — rendered live in HTML (cd.md §8.3), see templates/_wordmark.html:
   .ss-wordmark > .ss-wordmark-icon + .ss-wordmark-text > .ss-wordmark-soul + .ss-wordmark-service */
.ss-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--ss-font-headline);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--ss-text);
  text-decoration: none;
  white-space: nowrap;
}
.ss-wordmark-icon {
  width: 1.3em;
  height: 1.3em;
  color: var(--ss-accent);
  flex-shrink: 0;
}
.ss-wordmark-soul {
  font-weight: 700;
  color: var(--ss-accent-text);
}
.ss-wordmark-service {
  font-weight: 300;
  color: var(--ss-text);
}