/* SuperMail — Design Tokens (Claude-inspired warm minimalism)
   ═══════════════════════════════════════════════════════════════════════
   Semantic CSS custom properties. All values referenced via var().
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color — Surface (warm off-whites, never pure white/gray) ── */
  --color-bg:              #faf9f7;
  --color-card:            #ffffff;
  --color-selected:        #ebe8e0;
  --color-hover:           #f3f1ec;
  --color-surface-alt:     #f7f5f0;

  /* ── Color — Text (warm grays, never pure black) ── */
  --color-text-strong:     #1f1e1c;
  --color-text:            #2a2826;
  --color-text-secondary:  #6b6864;
  --color-text-muted:      #9a9690;

  /* ── Color — Border (barely visible) ── */
  --color-border:          #e8e4dc;
  --color-border-hover:    #d8d3c7;

  /* ── Color — Brand (terracotta accent) ── */
  --color-primary:         #b85c38;
  --color-primary-hover:   #8a3f1f;
  --color-primary-light:   #f1e4dd;

  /* ── Color — Semantic ── */
  --color-danger:          #c04a3a;
  --color-success:         #6b8a4f;
  --color-warning:         #c89c4a;

  /* ── Shape ── */
  --radius-sm:             4px;
  --radius-md:             6px;
  --radius-lg:             10px;
  --radius-full:           50%;

  /* ── Shadow ── */
  --shadow-sm:             0 1px 3px rgba(60, 50, 40, 0.06);
  --shadow-md:             0 4px 12px rgba(60, 50, 40, 0.08);
  --shadow-lg:             0 8px 40px rgba(0, 0, 0, 0.16);

  /* ── Typography families ── */
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif:   'Source Serif Pro', 'Charter', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ── Motion ── */
  --transition-fast:       0.15s ease;

  /* ── Legacy aliases (backward compat with JS-injected CSS) ── */
  --bg:             var(--color-bg);
  --card:           var(--color-card);
  --text:           var(--color-text);
  --text-strong:    var(--color-text-strong);
  --text-secondary: var(--color-text-secondary);
  --text-muted:     var(--color-text-muted);
  --border:         var(--color-border);
  --border-hover:   var(--color-border-hover);
  --primary:        var(--color-primary);
  --primary-hover:  var(--color-primary-hover);
  --primary-light:  var(--color-primary-light);
  --danger:         var(--color-danger);
  --success:        var(--color-success);
  --warning:        var(--color-warning);
  --selected:       var(--color-selected);
  --hover:          var(--color-hover);
  --radius:         var(--radius-md);
  --transition:     var(--transition-fast);
}