/* ════════════════════════════════════════════════════════════════
   TOKENS.CSS — Variabile globale (culori, spacing, fonturi)
   Convenții: docs/css/CONVENTIONS.md (BEM, kebab-case, mobile-first)
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Culori ── */
  --color-bg: #f4f6f8;
  --color-card: #ffffff;
  --color-primary: #2c3e50;
  --color-primary-2: #34495e;
  --color-accent: #c0392b;
  --color-ok: #16a085;
  --color-warn: #e67e22;
  --color-danger: #c0392b;
  --color-info: #3498db;

  --color-text: #1a1a1a;
  --color-text-muted: #6c757d;
  --color-text-soft: #9aa3ad;
  --color-border: #dde0e3;
  --color-border-subtle: #ecedef;
  --color-row-alt: #fafbfc;

  /* ── Pill colors ── */
  --pill-ok-bg: #d1f2eb;
  --pill-ok-fg: #0e6655;
  --pill-warn-bg: #fdebd0;
  --pill-warn-fg: #7e5109;
  --pill-bad-bg: #fadbd8;
  --pill-bad-fg: #922b21;
  --pill-muted-bg: #eaeded;
  --pill-muted-fg: #566573;
  --pill-info-bg: #d6eaf8;
  --pill-info-fg: #1a5276;

  /* ── Spacing (multiple de 0.25rem) ── */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-xxl: 3rem;     /* 48px */

  /* ── Border radius ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ── Shadow ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);

  /* ── Typography ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.5rem;    /* 24px */
  --font-size-xxl: 2rem;     /* 32px */

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-loose: 1.75;
}