/**
 * tokens.css
 *
 * Every component reads colors/spacing/type from these custom properties —
 * never a hardcoded hex or px value in component CSS. This is what makes
 * dark mode a single flip instead of a per-component patch, and what lets
 * future theming (e.g. a "high contrast" accessibility theme) be added as
 * one more attribute value, not a redesign.
 */

:root {
  /* Type scale — one accent, restrained, legible at small sizes on a
     cracked-screen Android in daylight, which is the real test for a
     family chat app, not a design portfolio. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-bubble: 18px;

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark theme — default, matches "dark-mode-first" decision from planning. */
:root,
[data-theme="dark"] {
  --color-bg: #0b1016;
  --color-surface: #131a22;
  --color-surface-raised: #1b2530;
  --color-border: #26323e;

  --color-text-primary: #eef2f6;
  --color-text-secondary: #96a3b0;
  --color-text-disabled: #5b6773;

  --color-accent: #2fbf8f;       /* distinct from the generic terracotta/AI-green defaults — a calm signal-teal, not a brand-y neon */
  --color-accent-contrast: #06120d;
  --color-bubble-mine: #1e4d3f;
  --color-bubble-theirs: #1b2530;

  --color-danger: #e5584f;
  --color-online: #33d17a;
  --color-warning: #e0a941;
}

[data-theme="light"] {
  --color-bg: #f6f8fa;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #e1e6ea;

  --color-text-primary: #10171f;
  --color-text-secondary: #4d5b68;
  --color-text-disabled: #a2adb6;

  --color-accent: #1f9d76;
  --color-accent-contrast: #ffffff;
  --color-bubble-mine: #d7f2e8;
  --color-bubble-theirs: #ffffff;

  --color-danger: #c8392f;
  --color-online: #1f9d56;
  --color-warning: #b8801f;
}

/* Respect OS-level reduced motion — accessibility floor, not optional. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible keyboard focus everywhere — never `outline: none` without a
   replacement. This is a hard rule for this codebase, not a suggestion. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}