/* ── variables.css — design tokens ───────────────────────────────────────
   Single source of truth for all CSS custom properties.
   Dark mode is the default; light mode overrides via prefers-color-scheme.
────────────────────────────────────────────────────────────────────────── */

/* ── Dark mode (default) ─────────────────────────────────────── */
:root {
  --bg:        #000000;
  --surface:   #111111;
  --surface1:  #0a0a0a;
  --surface2:  #1a1a1a;
  --surface3:  #242424;
  --accent:    rgb(255, 214, 221);
  --accent-dk: rgb(230, 180, 190);
  --accent-me: rgb(224, 122, 95);
  --text:      #ffffff;
  --muted:     rgb(125, 125, 125);
  --border:    rgba(255, 255, 255, 0.07);
  --border-md: rgba(255, 255, 255, 0.12);
  --danger:    rgb(255, 100, 100);
  --warning:   rgb(255, 179, 71);

  --font: 'Work Sans', system-ui, -apple-system, sans-serif;
  --mono: 'Work Sans', 'Cascadia Code', monospace;

  /* ── Type scale ────────────────────────────────────────────────
     Base: 15px. All rem values derive from this.
     xs   → labels, badges, timestamps, hints
     sm   → secondary text, descriptions, status
     base → body copy, bubble text, inputs
     md   → author names, section labels
     lg   → card titles, name headings
     xl   → large headings (user card name)
  ──────────────────────────────────────────────────────────────── */
  --text-xs:   0.7rem;    /* 10.5px — timestamps, badges, micro labels  */
  --text-sm:   0.8rem;    /* 12px   — descriptions, hints, status text  */
  --text-base: 0.933rem;  /* 14px   — bubble text, inputs, body copy    */
  --text-md:   1rem;      /* 15px   — author names, section labels      */
  --text-lg:   1.133rem;  /* 17px   — card titles                       */
  --text-xl:   1.333rem;  /* 20px   — user card name heading            */

  /* ── Radius scale ──────────────────────────────────────────────
     sm   → small chips, tags, status badges
     md   → buttons, inputs, small cards
     lg   → message composer, profile bubble
     xl   → bottom sheets, cards
     full → avatars, blobs, circular elements
  ──────────────────────────────────────────────────────────────── */
  --radius-sm:   0.4rem;   /* 6px  */
  --radius-md:   0.667rem; /* 10px */
  --radius-lg:   1.333rem; /* 20px */
  --radius-xl:   1.667rem; /* 25px */
  --radius-full: 9999px;

  /* ── Spacing scale ─────────────────────────────────────────────
     Used for padding and gap. Derived from a 4px base unit.
  ──────────────────────────────────────────────────────────────── */
  --sp-1:  0.267rem;  /* 4px  */
  --sp-2:  0.533rem;  /* 8px  */
  --sp-3:  0.8rem;    /* 12px */
  --sp-4:  1.067rem;  /* 16px */
  --sp-5:  1.333rem;  /* 20px */
  --sp-6:  1.6rem;    /* 24px */
}

/* ── Light mode ──────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        #ffffff;
    --surface:   #f2f2f2;
    --surface1:  #cfcfcf;
    --surface2:  #e8e8e8;
    --surface3:  #dedede;
    --accent:    rgb(189, 149, 156);
    --accent-dk: rgb(173, 120, 128);
    --text:      #000000;
    --muted:     rgb(75, 75, 75);
    --border:    rgba(0, 0, 0, 0.07);
    --border-md: rgba(0, 0, 0, 0.12);
    --danger:    rgb(180, 40, 40);
    --warning:   rgb(180, 110, 0);
  }
}