/* dinvy-theme.css — shared design tokens for dinvy (single source of truth).
   TOKENS ONLY: linking this file changes nothing until a page references a var().
   Loaded like the other /lib assets (analytics.js, firebase-auth-manager.js,
   mini-calendar.js) via: <link rel="stylesheet" href="/lib/dinvy-theme.css">.
   Adopted so far: body font-family + page background. The rest is defined for
   later increments (colors, components) — see DINVY-MIGRATION-SPEC Phase 4. */
:root {
  /* ── Fonts ─────────────────────────────────────────────── */
  --dinvy-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --dinvy-font-heading: var(--dinvy-font-body);
  --dinvy-font-logo: 'Playwrite DE SAS', cursive;
  --dinvy-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Type scale (rem; base 16px) ───────────────────────── */
  --dinvy-fs-base: 16px;
  --dinvy-fs-2xs: 0.6875rem; /* 11px */
  --dinvy-fs-xs:  0.75rem;   /* 12px */
  --dinvy-fs-sm:  0.8125rem; /* 13px */
  --dinvy-fs-md:  0.875rem;  /* 14px */
  --dinvy-fs-lg:  1rem;      /* 16px */
  --dinvy-fs-xl:  1.125rem;  /* 18px */
  --dinvy-fs-2xl: 1.5rem;    /* 24px */
  --dinvy-fs-3xl: 2rem;      /* 32px */
  --dinvy-fs-4xl: 3rem;      /* 48px */

  /* ── Weights / line-heights ────────────────────────────── */
  --dinvy-fw-light: 300;
  --dinvy-fw-regular: 400;
  --dinvy-fw-medium: 500;
  --dinvy-fw-semibold: 600;
  --dinvy-fw-bold: 700;
  --dinvy-lh-tight: 1.2;
  --dinvy-lh-base: 1.5;

  /* ── Backgrounds / surfaces ────────────────────────────── */
  --dinvy-bg: #e8e8e8;
  --dinvy-surface: #ffffff;
  --dinvy-surface-alt: #f8f9fa;

  /* ── Text ──────────────────────────────────────────────── */
  --dinvy-text: #333333;
  --dinvy-text-muted: #666666;
  --dinvy-text-subtle: #999999;
  --dinvy-heading: #2c3e50;

  /* ── Brand ─────────────────────────────────────────────── */
  --dinvy-primary: #4a90e2;
  --dinvy-primary-dark: #357abd;
  --dinvy-primary-gradient: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  --dinvy-focus-ring: 0 0 0 3px rgba(74, 144, 226, 0.1);
  --dinvy-swap: #9c27b0;

  /* ── Status (Bootstrap family) ─────────────────────────── */
  --dinvy-success: #28a745;
  --dinvy-danger: #dc3545;
  --dinvy-warning: #ff9800;
  --dinvy-info: #6c757d;

  /* ── Borders / shadows / radii ─────────────────────────── */
  --dinvy-border: #dddddd;
  --dinvy-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
  --dinvy-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --dinvy-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);
  --dinvy-radius: 8px;
}

/* ═══ Shared components ═══════════════════════════════════════ */

/* Loading spinner — consolidated from per-page copies (40px ring, brand-colored
   top). A page adopts it by deleting its local .spinner + @keyframes spin. */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--dinvy-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}