/* ═══ FIȘIER PARTAJAT (afood-shared/css/tokens.css) — nu edita în aplicație; editează în afood-shared, apoi: python sync_shared.py --apply ═══ */
:root {
  color-scheme: light;

  /* Accent — DEFAULTS ONLY; theme.css (loaded after) overrides these six */
  --accent: #0e9384; --accent-strong: #0b7d70; --accent-soft: #e2f4f1;
  --accent-softer: #f0faf8; --accent-onsoft: #0a5f56; --accent-rgb: 14, 147, 132;

  /* Surfaces — canvasul e cu o treaptă mai adânc decât suprafața, ca fiecare card
     să se citească drept plan ridicat, nu drept dreptunghi alb pe alb (§3.1). */
  --canvas: #f2f5f9; --surface: #ffffff; --subtle: #f2f4f7; --sunken: #eceff3;
  --on-accent: #ffffff;
  --scrim: rgba(23, 28, 35, 0.48); --overlay-surface: rgba(255, 255, 255, 0.72);
  --scroll-shade: rgba(23, 28, 35, 0.10);

  /* Ink */
  --ink-1: #171c23; --ink-2: #4f5866; --ink-3: #66707f; --ink-4: #98a1ad;

  /* Lines */
  --line-1: #e5e8ec; --line-2: #eceff2; --line-3: #cfd5dc;

  /* Semantic: fill / ink / soft / rgb */
  --success: #1a9a5c; --success-ink: #0f6b43; --success-soft: #e3f5ea; --success-rgb: 26, 154, 92;
  --warning: #d98a0c; --warning-ink: #8a5305; --warning-soft: #fdf1dd; --warning-rgb: 217, 138, 12;
  --danger:  #dc4437; --danger-ink:  #a52a22; --danger-soft:  #fdeceb; --danger-rgb:  220, 68, 55;
  --info:    #3b7ddd; --info-ink:    #245aa8; --info-soft:    #e8f0fc; --info-rgb:    59, 125, 221;
  --neutral: #7c8796; --neutral-ink: #4b5563; --neutral-soft: #eef1f4; --neutral-rgb: 124, 135, 150;
  --purple:  #7c5cd6; --purple-ink:  #5638b3; --purple-soft:  #efeafb; --purple-rgb:  124, 92, 214;
  --on-dark-success: #5bd396; --on-dark-warning: #f2b34a; --on-dark-danger: #ff8c85; --on-dark-info: #7aa7f2;

  /* Rail */
  --rail-bg: var(--surface); --rail-line: var(--line-1); --rail-text: var(--ink-2);
  --rail-hover: var(--subtle); --rail-active-bg: var(--accent-soft); --rail-active-fg: var(--accent-onsoft);
  --rail-label: var(--ink-3);

  /* Charts */
  --chart-1: var(--accent); --chart-2: #ef9f27; --chart-3: #7c5cd6; --chart-4: #e25c7c;
  --chart-5: #2ba36b; --chart-6: #5b6b7f; --chart-7: #1d9bb5; --chart-8: #98a1ad;
  --chart-grid: var(--line-2); --chart-tick: var(--ink-3); --chart-fill-alpha: 0.10;

  /* Typography */
  --font-ui: 'Inter', -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Scara de mărimi — 7 trepte, fiecare cu UN rol (§4.2). Pasul crește pe măsură ce
     urci (+1 +1 +2 +2 +4 +6), deci fiecare treaptă se vede că e altă treaptă:
       12 etichete, legende, badge-uri, anteturi de tabel   13 CONTROALE (buton, câmp,
       nav, tab, meniu) și text secundar dens   14 corp și DATE (celule, valori, nume)
       16 titluri (card, secțiune, modal, grafic) + controale mari
       18 titlul paginii (app bar), titlul de login   22 valoare KPI pe telefon
       28 valoare KPI, titlul mărcii pe login */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px;
  --fs-22: 22px; --fs-28: 28px;

  /* Spacing — grila de 4 pt. `--sp-half` (2 px) e SINGURA sub-treaptă și e permisă
     doar între două linii de text din același bloc (titlu/subtitlu, nume/detaliu). */
  --sp-half: 2px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Controls & icons (mobile values in the media block below) */
  --ctl-sm: 32px; --ctl-md: 40px; --ctl-lg: 48px; --touch: 32px;
  --icon-16: 16px; --icon-18: 18px; --icon-20: 20px; --icon-24: 24px;

  /* Radius */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 18px; --r-full: 9999px;

  /* Elevation — trei trepte. `--shadow-1` are două straturi (contact + ambient larg):
     rămâne discretă, dar face diferența dintre „card" și „dreptunghi desenat". */
  --shadow-1: 0 1px 2px rgba(23, 28, 35, 0.05), 0 2px 6px -2px rgba(23, 28, 35, 0.06);
  --shadow-2: 0 4px 16px rgba(23, 28, 35, 0.08), 0 1px 3px rgba(23, 28, 35, 0.05);
  --shadow-3: 0 16px 48px rgba(23, 28, 35, 0.16);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), 0.38);
  --ring-danger: 0 0 0 3px rgba(var(--danger-rgb), 0.32);
  /* Varianta interioară — pentru controalele care nu au loc să scoată un inel afară
     (tab, chip de preset, eticheta de lună, celulă editabilă). */
  --ring-inset: inset 0 0 0 2px var(--accent);

  /* Motion */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layout */
  --rail-w: 248px; --rail-w-collapsed: 72px; --drawer-w: 280px; --topbar-h: 56px; --content-max: 1440px;
  --chart-h: 280px; --chart-h-doughnut: 240px; --chart-h-tall: 360px;

  /* Z-index */
  --z-sticky: 10; --z-map-ui: 20; --z-topbar: 30; --z-rail: 40; --z-scrim: 50; --z-drawer: 60;
  --z-dropdown: 70; --z-modal: 80; --z-toast: 90; --z-tooltip: 100;

  /* ── Legacy aliases consumed by shared JS / older CSS (aliases only, never values) ── */
  --color-bg: var(--canvas); --color-surface: var(--surface); --color-surface-subtle: var(--subtle);
  --color-text: var(--ink-1); --color-text-secondary: var(--ink-2); --color-text-muted: var(--ink-3);
  --color-border: var(--line-1); --color-border-light: var(--line-2); --color-border-strong: var(--line-3);
  --color-success: var(--success); --color-success-rgb: var(--success-rgb);
  --color-warning: var(--warning); --color-warning-rgb: var(--warning-rgb);
  --color-danger: var(--danger);   --color-danger-rgb: var(--danger-rgb);
  --color-info: var(--info);       --color-info-rgb: var(--info-rgb);
  --color-primary: var(--accent);  --color-primary-rgb: var(--accent-rgb);
  --font-family-mono: var(--font-mono);
  --font-size-xs: var(--fs-12); --font-size-sm: var(--fs-13); --font-size-base: var(--fs-14);
  --font-size-md: var(--fs-16); --font-size-xl: var(--fs-18);
  --radius-sm: var(--r-1); --radius-md: var(--r-2); --radius-lg: var(--r-3); --radius-xl: var(--r-4);
  --spacing-xs: var(--sp-1); --spacing-sm: var(--sp-2); --spacing-md: var(--sp-4);
  --spacing-lg: var(--sp-6); --spacing-xl: var(--sp-8); --spacing-2xl: var(--sp-12);
  --shadow-lg: var(--shadow-3); --shadow-focus: var(--ring);
  --transition-fast: var(--dur-1) var(--ease-out);
  --sidebar-width: var(--rail-w); --sidebar-collapsed: var(--rail-w-collapsed);
  --topbar-height: var(--topbar-h); --mobile-nav-height: 0px;
}

@media (max-width: 639px) {
  :root { --ctl-sm: 36px; --ctl-md: 44px; --ctl-lg: 48px; --touch: 44px;
          --chart-h: 220px; --chart-h-doughnut: 200px; --chart-h-tall: 260px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --chart-h: 260px; --chart-h-doughnut: 220px; --chart-h-tall: 320px; }
}