/**
 * Design contract — Family messenger + parental admin
 * Visual language: calm family safety · light · airy · restrained
 *
 * Direction: deep teal accent + warm ink on mist surfaces.
 * Avoid: purple gradients, cream/terracotta, dark-glow neon, Inter/Roboto/Arial.
 *
 * Agents: consume these tokens; do not invent parallel palettes.
 * Map UI to --ds-* first; legacy aliases below bridge older --* names.
 */

:root {
  /* ---------- Brand ---------- */
  --ds-brand-name: "Family Guard";

  /* ---------- Color — surfaces ---------- */
  --ds-color-bg: #f2f6f5;
  --ds-color-bg-mist: #e6efec;
  --ds-color-bg-warm: #f5f4f2;
  --ds-color-surface: #ffffff;
  --ds-color-surface-2: #ebf1ef;
  --ds-color-surface-3: #e0e9e6;
  --ds-color-border: #cdd8d4;
  --ds-color-border-strong: #a8b8b2;

  /* ---------- Color — ink ---------- */
  --ds-color-ink: #1b2b28;
  --ds-color-ink-soft: #2f413c;
  --ds-color-muted: #5a6e68;
  --ds-color-muted-2: #7a8c86;
  --ds-color-on-accent: #f7fbfa;
  --ds-color-on-danger: #fffaf9;

  /* ---------- Color — accent (deep teal) ---------- */
  --ds-color-accent: #0e6b5c;
  --ds-color-accent-hover: #0a5549;
  --ds-color-accent-pressed: #08453b;
  --ds-color-accent-soft: #d7ebe6;
  --ds-color-accent-soft-2: #c2e0d8;
  --ds-color-accent-ring: rgba(14, 107, 92, 0.22);

  /* ---------- Color — slate support ---------- */
  --ds-color-slate: #4a5c62;
  --ds-color-slate-soft: #dce4e6;

  /* ---------- Color — semantic ---------- */
  --ds-color-online: #2d8a66;
  --ds-color-online-soft: #d8efe4;
  --ds-color-danger: #b54a3f;
  --ds-color-danger-hover: #9a3d34;
  --ds-color-danger-soft: #f4e4e2;
  --ds-color-warning: #9a7b2f;
  --ds-color-warning-soft: #f3ecd8;
  --ds-color-info: #3d6b7a;
  --ds-color-info-soft: #dce8ec;

  /* ---------- Color — chat ---------- */
  --ds-color-bubble-out: #0e6b5c;
  --ds-color-bubble-out-text: #f7fbfa;
  --ds-color-bubble-in: #e8efec;
  --ds-color-bubble-in-text: #1b2b28;

  /* ---------- Color — call overlay (restrained, not neon) ---------- */
  --ds-color-call-bg: #15201e;
  --ds-color-call-panel: #1e2c29;
  --ds-color-call-text: #f2f6f5;
  --ds-color-call-muted: #a8bbb4;
  --ds-color-call-border: rgba(242, 246, 245, 0.28);
  --ds-color-call-btn: rgba(242, 246, 245, 0.14);
  --ds-color-call-btn-hover: rgba(242, 246, 245, 0.24);

  /* ---------- Atmosphere (subtle gradients) ---------- */
  --ds-gradient-page:
    radial-gradient(120% 80% at 10% -10%, #e6efec 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 0%, #eef3f1 0%, transparent 50%),
    linear-gradient(180deg, #f2f6f5 0%, #f5f4f2 100%);
  --ds-gradient-auth:
    radial-gradient(100% 90% at 50% -20%, #d7ebe6 0%, transparent 60%),
    linear-gradient(165deg, #f2f6f5 0%, #eef3f1 48%, #f5f4f2 100%);
  --ds-gradient-accent-soft:
    linear-gradient(135deg, #d7ebe6 0%, #e8efec 100%);

  /* ---------- Typography ---------- */
  /* Source Sans 3 — calm UI; Fraunces — brand/display only */
  --ds-font-sans: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, sans-serif;
  --ds-font-display: "Fraunces", "Source Serif 4", Georgia, "Times New Roman", serif;
  --ds-font-mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;

  --ds-text-xs: 0.75rem;    /* 12 */
  --ds-text-sm: 0.8125rem;  /* 13 */
  --ds-text-md: 0.9375rem;  /* 15 */
  --ds-text-lg: 1.0625rem;  /* 17 */
  --ds-text-xl: 1.25rem;    /* 20 */
  --ds-text-2xl: 1.5rem;    /* 24 */
  --ds-text-3xl: 1.875rem;  /* 30 */
  --ds-text-display: 2.25rem; /* 36 — brand hero */

  --ds-leading-tight: 1.25;
  --ds-leading-snug: 1.375;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.65;
  --ds-tracking-tight: -0.02em;
  --ds-tracking-normal: 0;
  --ds-tracking-wide: 0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem;  /* 4 */
  --ds-space-2: 0.5rem;   /* 8 */
  --ds-space-3: 0.75rem;  /* 12 */
  --ds-space-4: 1rem;     /* 16 */
  --ds-space-5: 1.25rem;  /* 20 */
  --ds-space-6: 1.5rem;   /* 24 */
  --ds-space-8: 2rem;     /* 32 */
  --ds-space-10: 2.5rem;  /* 40 */
  --ds-space-12: 3rem;    /* 48 */
  --ds-space-16: 4rem;    /* 64 */

  /* ---------- Radii (restrained, not pill-heavy) ---------- */
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 18px;
  --ds-radius-full: 9999px; /* avatars / status dots only */

  /* ---------- Shadows (soft, low contrast) ---------- */
  --ds-shadow-xs: 0 1px 2px rgba(27, 43, 40, 0.04);
  --ds-shadow-sm: 0 2px 8px rgba(27, 43, 40, 0.06);
  --ds-shadow-md: 0 4px 16px rgba(27, 43, 40, 0.08);
  --ds-shadow-lg: 0 12px 32px rgba(27, 43, 40, 0.1);
  --ds-shadow-focus: 0 0 0 3px var(--ds-color-accent-ring);

  /* ---------- Motion ---------- */
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ds-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ds-duration-fast: 120ms;
  --ds-duration-normal: 200ms;
  --ds-duration-slow: 320ms;
  --ds-duration-enter: 400ms;

  /* ---------- Z-index ---------- */
  --ds-z-base: 1;
  --ds-z-sidebar: 10;
  --ds-z-header: 20;
  --ds-z-modal: 50;
  --ds-z-toast: 60;
  --ds-z-call: 80;

  /* ---------- Legacy aliases (bridge existing style.css names) ---------- */
  --bg: var(--ds-color-bg);
  --panel: var(--ds-color-surface);
  --panel-2: var(--ds-color-surface-2);
  --border: var(--ds-color-border);
  --primary: var(--ds-color-accent);
  --primary-dark: var(--ds-color-accent-hover);
  --primary-light: var(--ds-color-accent-soft);
  --text: var(--ds-color-ink);
  --muted: var(--ds-color-muted);
  --bubble-out: var(--ds-color-bubble-out);
  --bubble-in: var(--ds-color-bubble-in);
  --online: var(--ds-color-online);
  --danger: var(--ds-color-danger);
  --danger-dark: var(--ds-color-danger-hover);
  --danger-light: var(--ds-color-danger-soft);
  --warning: var(--ds-color-warning-soft);
  --warning-dark: var(--ds-color-warning);
  --call-bg: var(--ds-color-call-bg);
  --call-panel: var(--ds-color-call-panel);
  --call-text: var(--ds-color-call-text);
  --call-muted: var(--ds-color-call-muted);
  --call-border: var(--ds-color-call-border);
  --call-btn: var(--ds-color-call-btn);
  --call-btn-hover: var(--ds-color-call-btn-hover);
  --shadow: var(--ds-shadow-sm);
  --radius: var(--ds-radius-md);
}