/*
 * Tercel Ads — design tokens.
 * Load this once in the light DOM (e.g. <link rel="stylesheet" href=".../tokens.css">).
 * Every component reads these CSS custom properties; they pierce shadow DOM, so
 * theming and dark-mode overrides work by re-declaring variables on :root.
 */
:root {
  /* ── Brand (teal) ─────────────────────────────────────────────────────── */
  --tc-color-brand: #0f766e;
  --tc-color-brand-dark: #115e59;
  --tc-color-brand-darker: #0b4f49;
  --tc-color-brand-light: #5eead4;
  --tc-color-brand-tint: rgba(15, 118, 110, 0.1);

  /* ── Neutrals (slate) ─────────────────────────────────────────────────── */
  --tc-color-bg: #f8fafc;          /* slate-50  — app background */
  --tc-color-surface: #ffffff;     /* cards, nav */
  --tc-color-border: #e2e8f0;      /* slate-200 */
  --tc-color-border-strong: #cbd5e1; /* slate-300 */
  --tc-color-text: #1e293b;        /* slate-800 */
  --tc-color-text-muted: #64748b;  /* slate-500 */
  --tc-color-text-subtle: #94a3b8; /* slate-400 */

  /* ── Semantic (status chips, alerts) ──────────────────────────────────── */
  --tc-color-success: #15803d;
  --tc-color-success-tint: rgba(22, 163, 74, 0.12);
  --tc-color-warning: #b45309;
  --tc-color-warning-tint: rgba(217, 119, 6, 0.14);
  --tc-color-danger: #b91c1c;
  --tc-color-danger-tint: rgba(220, 38, 38, 0.12);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --tc-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --tc-text-xs: 0.7rem;
  --tc-text-sm: 0.875rem;
  --tc-text-base: 1rem;
  --tc-text-lg: 1.125rem;
  --tc-text-xl: 1.375rem;
  --tc-weight-normal: 400;
  --tc-weight-medium: 500;
  --tc-weight-semibold: 600;
  --tc-weight-bold: 700;
  --tc-weight-extrabold: 800;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --tc-radius-sm: 0.375rem;
  --tc-radius-md: 0.625rem;  /* buttons */
  --tc-radius-lg: 0.9rem;    /* cards */
  --tc-radius-full: 999px;   /* chips, avatars */

  /* ── Spacing scale ────────────────────────────────────────────────────── */
  --tc-space-1: 0.25rem;
  --tc-space-2: 0.5rem;
  --tc-space-3: 0.75rem;
  --tc-space-4: 1rem;
  --tc-space-5: 1.25rem;
  --tc-space-6: 1.5rem;
  --tc-space-8: 2rem;

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --tc-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --tc-nav-max: 72rem;
}