/* ═══ FIȘIER PARTAJAT (afood-shared/css/tokens.css) — nu edita în aplicație; editează în afood-shared, apoi: python sync_shared.py --apply ═══ */
/* AFood „Pastel Motion": prietenos, rotunjit, apăsat (bold), pastel, plat, simetric, fluid.
   Toate valorile vin din sistemul AFood (packages/afoodbase); nimic nu se inventează aici.
   Temă întunecată: blocul de la final (preferința sistemului) + [data-theme] pentru forțare. */
:root {
  color-scheme: light;

  /* ── Brand ── */
  --brand: #28c86b; --brand-2: #02a816; --error: #ef4e4e;

  /* Accent — DEFAULTS ONLY; theme.css (loaded after) overrides these six */
  --accent: #28c86b; --accent-strong: #02a816; --accent-soft: #d7f5e3;
  --accent-softer: #ebfaf1; --accent-onsoft: #0e6b3b; --accent-rgb: 40, 200, 107;

  /* ── Pastele: perechi fundal → text/iconiță (un singur ton pe element) ── */
  --mint-bg: #d7f5e3;     --mint-fg: #0e6b3b;
  --peach-bg: #ffe2d1;    --peach-fg: #8a3b12;
  --lavender-bg: #e6e0ff; --lavender-fg: #4b3a9c;
  --butter-bg: #fff1c2;   --butter-fg: #7a5a00;
  --sky-bg: #d6ecff;      --sky-fg: #1c5a8c;
  --rose-bg: #ffdce6;     --rose-fg: #8c2a4a;
  /* „tertiary": chip-uri implicite, avatar, piste de progres — urmează accentul aplicației (theme.css),
     ca fiecare aplicație să-și păstreze identitatea și în elementele neutre. */
  --tertiary: var(--accent-soft); --on-tertiary: var(--accent-onsoft);

  /* ── Suprafețe (alb cald, nu gri rece) ── */
  --surface-lowest: #ffffff; --surface-low: #fbfaf7; --surface-container: #f5f4f0;
  --surface-high: #efede7;   --surface-highest: #e8e6df;
  --canvas: var(--surface-container);   /* fundalul paginii */
  --surface: #ffffff;                   /* card / input / dialog (primaryContainer) */
  --subtle: var(--surface-container);   /* hover, antet de tabel, pistă */
  --sunken: var(--surface-high);        /* apăsat, pistă adâncă */
  --on-accent: #ffffff;
  --scrim: rgba(26, 26, 34, 0.40); --overlay-surface: rgba(255, 255, 255, 0.72);
  --scroll-shade: rgba(26, 26, 34, 0.08);
  --inverse-surface: #1a1a22; --inverse-ink: #f5f4f0;   /* snackbar */

  /* Ink — text #1A1A22, secundar #3A3940; 3 și 4 = textul la 64 % / 42 % peste alb */
  --ink-1: #1a1a22; --ink-2: #3a3940; --ink-3: #6c6c72; --ink-4: #9f9fa2;

  /* Contur — 12 % (outline) și 8 % (fin); 3 = textul la 18 % (mâner, scrollbar) */
  --line-1: rgba(0, 0, 0, 0.12); --line-2: rgba(0, 0, 0, 0.08); --line-3: rgba(26, 26, 34, 0.18);

  /* Semantic: fill / ink / soft / rgb — mint = succes, peach = atenție, sky = informație,
     roz = eroare (pe fundal), lavandă = „mov" (categorii) */
  --success: #28c86b;           --success-ink: var(--mint-fg);     --success-soft: var(--mint-bg);     --success-rgb: 40, 200, 107;
  --warning: var(--peach-fg);   --warning-ink: var(--peach-fg);    --warning-soft: var(--peach-bg);    --warning-rgb: 138, 59, 18;
  --danger:  #ef4e4e;           --danger-ink:  var(--rose-fg);     --danger-soft:  var(--rose-bg);     --danger-rgb:  239, 78, 78;
  --info:    var(--sky-fg);     --info-ink:    var(--sky-fg);      --info-soft:    var(--sky-bg);      --info-rgb:    28, 90, 140;
  --neutral: var(--ink-3);      --neutral-ink: var(--ink-2);       --neutral-soft: var(--surface-high); --neutral-rgb: 108, 108, 114;
  --purple:  var(--lavender-fg); --purple-ink: var(--lavender-fg); --purple-soft:  var(--lavender-bg); --purple-rgb:  75, 58, 156;
  --on-dark-success: #a6ebc4; --on-dark-warning: #ffc7a8; --on-dark-danger: #ff6b6b; --on-dark-info: #a9d4ff;

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

  /* Charts — primarul, apoi fg-urile pastelelor (lizibile pe card) */
  --chart-1: var(--accent); --chart-2: #1c5a8c; --chart-3: #4b3a9c; --chart-4: #8a3b12;
  --chart-5: #8c2a4a; --chart-6: #7a5a00; --chart-7: #02a816; --chart-8: #9f9fa2;
  --chart-grid: rgba(0, 0, 0, 0.08); --chart-tick: #6c6c72; --chart-fill-alpha: 0.14;

  /* ── Tipografie: Nunito peste tot; ierarhia vine din grosime, nu din mărime ── */
  --font-ui: 'Nunito', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: var(--font-ui);          /* plăcuțe, IBAN, ID-uri: tot Nunito, cifre tabulare */
  /* Scara: 12–13 etichete mici / chip / tooltip · 14 corp, etichete, butoane, subtitluri, titluri de card
     · 18 titlul paginii, al dialogului și al app bar-ului · 22 / 26 valori KPI.
     Greutăți: corp 500 · etichetă 600 · accentuat (butoane, subtitluri) 700 · titlu 800.
     (Spec-ul AFood mobil cere 15 / 600–900; pe web, unde densitatea e mare, textul e o treaptă
     mai mic și mai subțire — cerut explicit după prima variantă, 2026-10-21.) */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-18: 18px; --fs-22: 22px; --fs-26: 26px;
  --fw-body: 500; --fw-label: 600; --fw-strong: 700; --fw-title: 800;
  --ls-title: -0.3px; --ls-sub: -0.1px;

  /* Spacing — pas de 4 px. `--sp-half` (2 px) doar între două linii din același bloc */
  --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;

  /* Controale: 36 xs · 40 s · 48 standard (butoane, câmpuri) · 80 mare */
  --ctl-xs: 36px; --ctl-sm: 40px; --ctl-md: 48px; --ctl-lg: 48px; --ctl-xl: 80px; --touch: 40px;
  --icon-16: 16px; --icon-18: 18px; --icon-20: 20px; --icon-24: 24px;

  /* Forme — superelipsă: 12 xs · 16 s · 24 m (carduri) · 32 l (dialoguri) */
  --r-1: 12px; --r-2: 16px; --r-3: 24px; --r-4: 32px; --r-full: 9999px;
  --corner: superellipse(1.5);          /* colțuri „netede" (squircle); browserele vechi = rotund */
  --border-fine: 1px; --border-focus: 2px;

  /* Elevație: zero. Ierarhia vine din suprafață, rază și grosimea fontului. */
  --shadow-1: none; --shadow-2: none; --shadow-3: none;
  --ring: 0 0 0 2px var(--accent);
  --ring-danger: 0 0 0 2px var(--danger);
  --ring-inset: inset 0 0 0 2px var(--accent);

  /* ── Mișcare ── */
  --dur-0: 70ms; --dur-1: 100ms; --dur-2: 170ms; --dur-3: 270ms; --dur-4: 360ms;
  --dur-5: 550ms; --dur-6: 750ms; --dur-7: 1000ms;
  --ease-emph: cubic-bezier(0.2, 0, 0, 1);          /* tranziții obișnuite, culoare */
  --ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);    /* intrări */
  --ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);    /* ieșiri */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* eliberări, schimbări de rază */
  --ease-out: var(--ease-emph); --ease-exit: var(--ease-accel);
  --press-scale: 0.96; --press-scale-chip: 0.94;

  /* Layout — conținut desktop 1150, coloană îngustă 680, dialog 410 / 600 */
  --rail-w: 248px; --rail-w-collapsed: 72px; --drawer-w: 280px; --topbar-h: 64px; --content-max: 1150px;
  --content-narrow: 680px; --dialog-w: 410px; --dialog-w-wide: 600px;
  --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) ── */
  --fs-15: var(--fs-14); --fs-16: var(--fs-14); --fs-20: var(--fs-18); --fs-24: var(--fs-22); --fs-28: var(--fs-26); --fs-30: var(--fs-26);
  --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-14); --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 { --touch: 48px;
          --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; }
}

/* ══════════ Temă întunecată — aceleași nume, perechile dark ale fiecărui ton ══════════
   Blocul e scris de două ori (preferința sistemului / forțat cu data-theme="dark"),
   pentru că CSS-ul nu poate împărți o listă de declarații între două selectoare
   condiționate diferit. Ține-le identice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --error: #ff6b6b;
    --mint-bg: #1f3a2c;     --mint-fg: #a6ebc4;
    --peach-bg: #3e2a20;    --peach-fg: #ffc7a8;
    --lavender-bg: #2d2843; --lavender-fg: #cbc0ff;
    --butter-bg: #3a331a;   --butter-fg: #ffe28a;
    --sky-bg: #1e2f40;      --sky-fg: #a9d4ff;
    --rose-bg: #3d2430;     --rose-fg: #ffb3c9;
    --tertiary: var(--accent-soft); --on-tertiary: var(--accent-onsoft);
    --surface-lowest: #111214; --surface-low: #1a1b1e; --surface-container: #18191c;
    --surface-high: #25262a;   --surface-highest: #2c2d32;
    --surface: #1e1f23; --subtle: var(--surface-high); --sunken: var(--surface-highest);
    --scrim: rgba(0, 0, 0, 0.56); --overlay-surface: rgba(30, 31, 35, 0.72);
    --scroll-shade: rgba(0, 0, 0, 0.32);
    --inverse-surface: #f2f3f8; --inverse-ink: #18191c;
    --ink-1: #f2f3f8; --ink-2: #dcdde3; --ink-3: #a6a7ab; --ink-4: #77787c;
    --line-1: #3a3b40; --line-2: #2c2d32; --line-3: rgba(242, 243, 248, 0.18);
    --success-rgb: 40, 200, 107; --warning-rgb: 255, 199, 168; --danger: #ff6b6b; --danger-rgb: 255, 107, 107;
    --info-rgb: 169, 212, 255; --neutral-rgb: 166, 167, 171; --purple-rgb: 203, 192, 255;
    --chart-2: #a9d4ff; --chart-3: #cbc0ff; --chart-4: #ffc7a8; --chart-5: #ffb3c9; --chart-6: #ffe28a;
    --chart-7: #a6ebc4; --chart-8: #77787c;
    --chart-grid: rgba(242, 243, 248, 0.08); --chart-tick: #a6a7ab;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --error: #ff6b6b;
  --mint-bg: #1f3a2c;     --mint-fg: #a6ebc4;
  --peach-bg: #3e2a20;    --peach-fg: #ffc7a8;
  --lavender-bg: #2d2843; --lavender-fg: #cbc0ff;
  --butter-bg: #3a331a;   --butter-fg: #ffe28a;
  --sky-bg: #1e2f40;      --sky-fg: #a9d4ff;
  --rose-bg: #3d2430;     --rose-fg: #ffb3c9;
  --tertiary: var(--accent-soft); --on-tertiary: var(--accent-onsoft);
  --surface-lowest: #111214; --surface-low: #1a1b1e; --surface-container: #18191c;
  --surface-high: #25262a;   --surface-highest: #2c2d32;
  --surface: #1e1f23; --subtle: var(--surface-high); --sunken: var(--surface-highest);
  --scrim: rgba(0, 0, 0, 0.56); --overlay-surface: rgba(30, 31, 35, 0.72);
  --scroll-shade: rgba(0, 0, 0, 0.32);
  --inverse-surface: #f2f3f8; --inverse-ink: #18191c;
  --ink-1: #f2f3f8; --ink-2: #dcdde3; --ink-3: #a6a7ab; --ink-4: #77787c;
  --line-1: #3a3b40; --line-2: #2c2d32; --line-3: rgba(242, 243, 248, 0.18);
  --success-rgb: 40, 200, 107; --warning-rgb: 255, 199, 168; --danger: #ff6b6b; --danger-rgb: 255, 107, 107;
  --info-rgb: 169, 212, 255; --neutral-rgb: 166, 167, 171; --purple-rgb: 203, 192, 255;
  --chart-2: #a9d4ff; --chart-3: #cbc0ff; --chart-4: #ffc7a8; --chart-5: #ffb3c9; --chart-6: #ffe28a;
  --chart-7: #a6ebc4; --chart-8: #77787c;
  --chart-grid: rgba(242, 243, 248, 0.08); --chart-tick: #a6a7ab;
}