/* Kindred design tokens: a copy of the design system's tokens.json (docs/design/design-system.md).
   Dark is the primary theme; light applies under prefers-color-scheme: light unless data-theme says otherwise.
   Change values in the design system first, then here. */
:root {
  color-scheme: dark;
  --surface-000: #0E1120;
  --surface-100: #161A2E;
  --surface-200: #1B2038;
  --surface-300: #2A3052;
  --border: #23283F;
  --border-control: #6A71A3;
  --ink: #ECEAF4;
  --ink-subtle: #B4B8D2;
  --ink-muted: #A3A7C2;
  --coral: #FF7A66;
  --on-coral: #0E1120;
  --coral-text: #FF8A78;
  --violet: #9B8CFF;
  --focus: #9B8CFF;
  --ai-bg: #2A2347;
  --ai-ink: #C9BFFF;
  --guest-bg: #3A2A1E;
  --guest-ink: #F5C9A0;
  --success: #5ED3A1;
  --success-bg: #183A30;
  --success-ink: #8FE3BE;
  --warning: #F5C15C;
  --danger: #FF6B81;
  --danger-bg: #3A1F26;
  --danger-ink: #FFB7C0;
  --scrim: rgba(14, 17, 32, 0.72);
  --on-scrim: #ECEAF4;
  --photo-placeholder: #2A2F45;
  --kin-peach: #F2B8A0;
  --kin-lilac: #B9AEFF;
  --kin-mint: #9FD8B5;
  --kin-honey: #F5D08A;
  --kin-ink: #0E1120;
  --mark-tile: #101834;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45);

  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --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;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 18px;
  --radius-pill: 999px; --radius-round: 50%;
  /* Relationship stances (Admin → Relationships): warm and cold poles, validated for colour-blind separation. */
  --stance-warm: #3987E5; --stance-cold: #E66767;
  --touch-min: 44px; --nav-width: 280px; --feed-width: 620px; --panel-width: 340px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --surface-000: #F7F5FB; --surface-100: #FFFFFF; --surface-200: #F0EDF7; --surface-300: #E2DEF0;
    --border: #DCD8E8; --border-control: #8C88A6;
    --ink: #171A2B; --ink-subtle: #474B66; --ink-muted: #5A5E78;
    --coral: #D2402A; --on-coral: #FFFFFF; --coral-text: #B8341F; --violet: #6A4FD8; --focus: #6A4FD8;
    --ai-bg: #ECE7FF; --ai-ink: #4E33BE; --guest-bg: #FCEBDD; --guest-ink: #7F4410;
    --success: #13795B; --success-bg: #DDF4EA; --success-ink: #0B6248; --warning: #8F5C00;
    --danger: #C0283F; --danger-bg: #FDE4E8; --danger-ink: #9B1C32;
    --shadow-float: 0 12px 32px rgba(23, 26, 43, 0.14);
    --stance-warm: #2A78D6; --stance-cold: #E34948;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-000: #F7F5FB; --surface-100: #FFFFFF; --surface-200: #F0EDF7; --surface-300: #E2DEF0;
  --border: #DCD8E8; --border-control: #8C88A6;
  --ink: #171A2B; --ink-subtle: #474B66; --ink-muted: #5A5E78;
  --coral: #D2402A; --on-coral: #FFFFFF; --coral-text: #B8341F; --violet: #6A4FD8; --focus: #6A4FD8;
  --ai-bg: #ECE7FF; --ai-ink: #4E33BE; --guest-bg: #FCEBDD; --guest-ink: #7F4410;
  --success: #13795B; --success-bg: #DDF4EA; --success-ink: #0B6248; --warning: #8F5C00;
  --danger: #C0283F; --danger-bg: #FDE4E8; --danger-ink: #9B1C32;
  --shadow-float: 0 12px 32px rgba(23, 26, 43, 0.14);
  --stance-warm: #2A78D6; --stance-cold: #E34948;
}