/* ==========================================================================
   SG Chat Design Tokens
   ==========================================================================
   Locked visual direction (approved via UI Reviews dashboard,
   review 20260904_181200_sgchat_hybrid_001_colors): "Hybrid" —
   003-editorial-calm's WhatsApp-grade structure/density/typography,
   recolored with 001-bubbly-pastel's bright purple/pink/mint palette.

   Source mockup: /home/saeed/sgchat/sketches/005-hybrid-001-colors/index.html
   Comparison doc: /home/saeed/sgchat/sketches/COMPARISON.md

   Usage: this file must be @import'd (or <link>'d) BEFORE any other
   stylesheet in index.html, so every feature CSS file (contacts.css,
   games.css, whiteboard.css, e2ee.css, ar.css, call.css) can reference
   these custom properties instead of hardcoding colors/spacing.

   Do NOT hardcode hex colors, px spacing, or font names in feature CSS
   files going forward — always reference a token below. If a value you
   need isn't here, add it here first (keeps the palette single-sourced).
   ========================================================================== */

:root {
  /* --- Brand palette (from mockup 005) --- */
  --sg-purple: #8a5cf6;
  --sg-purple-soft: #f3ecff;
  --sg-mint: #3fd6b0;
  --sg-mint-soft: #e1fbf4;
  --sg-pink: #ff5c8d;
  --sg-pink-soft: #ffe8ef;
  --sg-danger-soft: #fdecea; /* soft tint for calmed-down destructive actions (e.g. "Forget device") */

  /* --- Text / ink --- */
  --sg-ink: #2c2620;
  --sg-ink-soft: #8a8074;

  /* --- Surfaces --- */
  --sg-bg: #f9edf5;          /* app background / stage */
  --sg-bg-alt: #fff6f9;      /* secondary background (login panel, chat log) */
  --sg-panel: #ffffff;       /* cards, headers, input bars */
  --sg-line: #f0dbe8;        /* hairline borders/dividers */

  /* --- Semantic aliases (use these in feature CSS, not the raw --sg-* above,
     so a future re-theme only needs to change this block) --- */
  --color-accent: var(--sg-purple);
  --color-accent-soft: var(--sg-purple-soft);
  --color-success: var(--sg-mint);       /* presence "online" dot, confirm actions */
  --color-success-soft: var(--sg-mint-soft);
  --color-warm: var(--sg-pink);          /* cross-family badges, ring accent, danger-adjacent warmth */
  --color-warm-soft: var(--sg-pink-soft);
  --color-text: var(--sg-ink);
  --color-text-muted: var(--sg-ink-soft);
  --color-bg: var(--sg-bg);
  --color-bg-alt: var(--sg-bg-alt);
  --color-surface: var(--sg-panel);
  --color-border: var(--sg-line);

  /* Legacy dark-theme aliases kept ONLY so any not-yet-migrated selector
     that still references the old admin-tool tokens doesn't render
     invisible/unstyled text during the phased rollout. Remove once every
     feature CSS file has been migrated (see docs/wave7-design-system.md
     migration checklist). */
  --bg: var(--color-bg);
  --panel: var(--color-surface);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --danger: #e5534b;
  --ok: var(--color-success);
  --color-danger: var(--danger);
  --color-danger-soft: var(--sg-danger-soft);

  /* --- Presence ring (borrowed-from-001 conic gradient, retoned) --- */
  --ring-gradient: conic-gradient(from 90deg, var(--sg-purple), var(--sg-pink), var(--sg-mint), var(--sg-purple));

  /* --- Typography --- */
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;

  /* --- Spacing scale (4px base unit) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* --- Radius scale --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* --- Motion --- */
  --ease-standard: cubic-bezier(.2,.8,.4,1);
  --ease-bounce: cubic-bezier(.2,1.2,.4,1);   /* toast/incoming-call pop, borrowed from 001 */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-toast: 400ms;

  /* --- Shadows --- */
  --shadow-card: 0 2px 10px -4px rgba(44, 38, 32, 0.15);
  --shadow-modal: 0 24px 60px -20px rgba(60, 40, 20, 0.35);
}

/* Google Fonts — Fraunces (display/headings) + Inter (body).
   Feature CSS files should NOT re-import fonts; this is the single
   source. If index.html's own <link> preconnect/font tags are ever
   removed, this @import is the fallback so styling doesn't silently
   revert to the browser default serif/sans-serif. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');