/* @thomasmore/design — design tokens (APP theme).
 * Extracted from the marketplace brand (tm_marketplace_catalog_frontend/catalog.css :root).
 * The apex marketing site uses a separate dark theme — not these tokens. */
:root {
  /* ── surfaces ── */
  --tm-bg:            #f8fafc;
  --tm-bg-2:          #eef2f7;
  --tm-surface:       #ffffff;
  --tm-surface-2:     #f1f5f9;
  --tm-border:        rgba(15, 23, 42, 0.08);
  --tm-border-strong: rgba(15, 23, 42, 0.16);

  /* ── brand accents (indigo → violet → cyan) ── */
  --tm-accent:        #6366f1;
  --tm-accent-2:      #8b5cf6;
  --tm-accent-3:      #06b6d4;
  --tm-accent-soft:   rgba(99, 102, 241, 0.12);
  --tm-gradient:      linear-gradient(135deg, var(--tm-accent), var(--tm-accent-2));
  --tm-gradient-ink:  linear-gradient(135deg, #0f172a 30%, var(--tm-accent-2));

  /* ── text ── */
  --tm-text:          #0f172a;
  --tm-muted:         #64748b;
  --tm-on-accent:     #ffffff;

  /* ── status ── */
  --tm-success:       #10b981;
  --tm-warning:       #b45309;
  --tm-danger:        #ef4444;

  /* ── typography ── */
  --tm-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tm-font-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── radii ── */
  --tm-radius-sm:     8px;
  --tm-radius:        14px;
  --tm-radius-lg:     20px;
  --tm-radius-pill:   999px;

  /* ── spacing (4px base) ── */
  --tm-space-1:       4px;
  --tm-space-2:       8px;
  --tm-space-3:       12px;
  --tm-space-4:       16px;
  --tm-space-5:       24px;
  --tm-space-6:       32px;
  --tm-space-7:       48px;
  --tm-space-8:       64px;

  /* ── elevation ── */
  --tm-shadow-xs:     0 1px 2px rgba(15, 23, 42, 0.04);
  --tm-shadow-md:     0 10px 30px rgba(15, 23, 42, 0.10);
  --tm-shadow-lg:     0 12px 40px rgba(15, 23, 42, 0.14);
  --tm-shadow-accent: 0 4px 12px rgba(99, 102, 241, 0.30);

  /* ── focus ring ── */
  --tm-ring:          0 0 0 4px var(--tm-accent-soft);

  /* ── layout ── */
  --tm-container:     1140px;
}