/* ==========================================================================
   tokens.css — toate valorile de aspect ale aplicației, într-un singur loc.

   Trei niveluri:
     1. Paleta (--pal-*): culorile de bază. Le schimbi ca să schimbi tema.
     2. Semantice (--color-*, --font-*, --space-*, ...): ce folosesc componentele.
        Trimit la paletă; în mod întunecat se redefinesc doar acestea.
     3. Componente (--btn-*, --card-*, ...): reglaje fine, opționale.

   Pagina „Aspect” din aplicație salvează suprascrieri pentru nivelurile 1 și 2
   (events.appearance în baza de date) și le aplică pe :root la pornire.
   Componentele nu folosesc NICIODATĂ culori sau mărimi scrise direct.
   ========================================================================== */

:root {
  /* ---------- 1. Paleta (tema implicită „Scenă”) ---------- */
  --pal-ink-900: #13232B;
  --pal-ink-700: #4F626C;
  --pal-ink-500: #7A8A92;
  --pal-ink-300: #B3C0C6;
  --pal-ink-200: #D3DBDF;
  --pal-ink-100: #E7ECEE;
  --pal-ink-050: #F1F4F5;
  --pal-white:   #FFFFFF;

  --pal-accent-700: #164C61;
  --pal-accent-600: #1B5D77;
  --pal-accent-100: #DCEAF0;

  --pal-brass-600: #8F5E10;  --pal-brass-100: #F4E8D1;
  --pal-sage-600:  #1F7066;  --pal-sage-100:  #DAEEEA;
  --pal-plum-600:  #6B4C89;  --pal-plum-100:  #ECE4F3;
  --pal-red-600:   #BB3226;  --pal-red-100:   #F8E0DC;
  --pal-green-600: #2B7645;  --pal-green-100: #DCEEE1;

  /* ---------- 2. Semantice: culori ---------- */
  --color-bg:            var(--pal-ink-050);
  --color-surface:       var(--pal-white);
  --color-surface-sunk:  var(--pal-ink-100);
  --color-line:          var(--pal-ink-200);
  --color-line-strong:   var(--pal-ink-300);
  --color-fg:            var(--pal-ink-900);
  --color-fg-muted:      var(--pal-ink-700);
  --color-fg-faint:      var(--pal-ink-500);

  --color-accent:        var(--pal-accent-600);
  --color-accent-strong: var(--pal-accent-700);
  --color-accent-soft:   var(--pal-accent-100);
  --color-on-accent:     var(--pal-white);

  --color-danger:        var(--pal-red-600);
  --color-danger-soft:   var(--pal-red-100);
  --color-success:       var(--pal-green-600);
  --color-success-soft:  var(--pal-green-100);
  --color-warning:       var(--pal-brass-600);
  --color-warning-soft:  var(--pal-brass-100);

  --color-scrim:         rgb(10 20 26 / .45);
  --color-shadow:        rgb(19 35 43 / .10);
  --color-focus:         var(--pal-accent-600);

  /* Culori pentru unități (departamente). Codul unității din baza de date
     alege variabila: unitatea „av” folosește --unit-av, etc. */
  --unit-program:      var(--pal-accent-600);  --unit-program-soft:      var(--pal-accent-100);
  --unit-av:           var(--pal-brass-600);   --unit-av-soft:           var(--pal-brass-100);
  --unit-botez:        var(--pal-sage-600);    --unit-botez-soft:        var(--pal-sage-100);
  --unit-presedinte:   var(--pal-plum-600);    --unit-presedinte-soft:   var(--pal-plum-100);
  --unit-default:      var(--pal-ink-700);     --unit-default-soft:      var(--pal-ink-100);

  /* ---------- 2. Semantice: tipografie ---------- */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Mărimea de bază urmează setarea de text a telefonului (rem). */
  --text-base: 1rem;           /* 16px implicit; pagina „Aspect” o poate mări */
  --text-scale: 1.2;           /* raportul dintre trepte */
  --text-xs:  calc(var(--text-base) / var(--text-scale) / var(--text-scale));
  --text-sm:  calc(var(--text-base) / var(--text-scale));
  --text-md:  var(--text-base);
  --text-lg:  calc(var(--text-base) * var(--text-scale));
  --text-xl:  calc(var(--text-lg) * var(--text-scale));
  --text-2xl: calc(var(--text-xl) * var(--text-scale));
  --text-3xl: calc(var(--text-2xl) * var(--text-scale));
  --leading-tight: 1.15;
  --leading-body:  1.5;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    650;

  /* ---------- 2. Semantice: spațiere, forme, densitate ---------- */
  --space-unit: 4px;
  --density: 1;                /* 1 = confortabil, 0.8 = compact (vezi [data-density]) */
  --space-1: calc(var(--space-unit) * 1 * var(--density));
  --space-2: calc(var(--space-unit) * 2 * var(--density));
  --space-3: calc(var(--space-unit) * 3 * var(--density));
  --space-4: calc(var(--space-unit) * 4 * var(--density));
  --space-5: calc(var(--space-unit) * 6 * var(--density));
  --space-6: calc(var(--space-unit) * 8 * var(--density));
  --space-7: calc(var(--space-unit) * 12 * var(--density));

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --border-width: 1px;
  --shadow-1: 0 1px 2px var(--color-shadow);
  --shadow-2: 0 6px 20px var(--color-shadow);
  --shadow-3: 0 18px 48px var(--color-shadow);

  /* ---------- Atingere ---------- */
  --tap-min: 48px;             /* țintă minimă de atingere (Material 48dp, Apple 44pt) */
  --tap-gap: 8px;              /* distanța minimă între două ținte */
  --swipe-threshold: 72px;     /* cât trebuie glisat ca să se bifeze o sarcină */
  --long-press-ms: 450;

  /* ---------- Mișcare ---------- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Așezare în pagină ---------- */
  /* Clase de fereastră (folosite în layout.css cu @container / @media):
       compact  < 600px   telefon, Find N6 închis (≈ 420px)
       medium   600–1099  Find N6 deschis (≈ 870×950), iPad vertical (744–1024)
       expanded ≥ 1100    iPad orizontal (1133–1366), desktop               */
  --bp-medium: 600px;
  --bp-expanded: 1100px;
  --rail-width: 88px;          /* bara de navigare laterală (medium) */
  --sidebar-width: 248px;      /* bara de navigare cu etichete (expanded) */
  --list-pane-min: 320px;
  --list-pane-max: 460px;
  --detail-pane-min: 360px;
  --content-max: 1600px;       /* pe ecrane foarte late, conținutul nu se întinde la nesfârșit */
  --bottom-nav-height: 64px;
  --gutter: max(var(--space-4), env(safe-area-inset-left, 0px));

  --z-nav: 20;
  --z-sheet: 40;
  --z-toast: 50;

  color-scheme: light;
}

/* Densitate compactă (aleasă din „Aspect”). Țintele de atingere NU se micșorează. */
:root[data-density="compact"] { --density: .8; }

/* ---------- Mod întunecat: doar semanticele se redefinesc ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #0E1417;
    --color-surface:       #161F24;
    --color-surface-sunk:  #1C272D;
    --color-line:          #2A3840;
    --color-line-strong:   #3B4C55;
    --color-fg:            #E3EBEE;
    --color-fg-muted:      #A1B1B8;
    --color-fg-faint:      #78898F;
    --color-accent:        #6CB3D0;
    --color-accent-strong: #8CC6DE;
    --color-accent-soft:   #17323D;
    --color-on-accent:     #0B1A20;
    --color-danger:        #F27D70;  --color-danger-soft:  #3F1F1B;
    --color-success:       #6FC68C;  --color-success-soft: #16301F;
    --color-warning:       #E2B063;  --color-warning-soft: #3A2D16;
    --color-scrim:         rgb(0 0 0 / .6);
    --color-shadow:        rgb(0 0 0 / .35);
    --unit-program: #6CB3D0;    --unit-program-soft: #17323D;
    --unit-av: #E2B063;         --unit-av-soft: #3A2D16;
    --unit-botez: #6CC5B6;      --unit-botez-soft: #153330;
    --unit-presedinte: #C2A4DD; --unit-presedinte-soft: #2E2340;
    --unit-default: #A1B1B8;    --unit-default-soft: #1C272D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg:            #0E1417;
  --color-surface:       #161F24;
  --color-surface-sunk:  #1C272D;
  --color-line:          #2A3840;
  --color-line-strong:   #3B4C55;
  --color-fg:            #E3EBEE;
  --color-fg-muted:      #A1B1B8;
  --color-fg-faint:      #78898F;
  --color-accent:        #6CB3D0;
  --color-accent-strong: #8CC6DE;
  --color-accent-soft:   #17323D;
  --color-on-accent:     #0B1A20;
  --color-danger:        #F27D70;  --color-danger-soft:  #3F1F1B;
  --color-success:       #6FC68C;  --color-success-soft: #16301F;
  --color-warning:       #E2B063;  --color-warning-soft: #3A2D16;
  --color-scrim:         rgb(0 0 0 / .6);
  --color-shadow:        rgb(0 0 0 / .35);
  --unit-program: #6CB3D0;    --unit-program-soft: #17323D;
  --unit-av: #E2B063;         --unit-av-soft: #3A2D16;
  --unit-botez: #6CC5B6;      --unit-botez-soft: #153330;
  --unit-presedinte: #C2A4DD; --unit-presedinte-soft: #2E2340;
  --unit-default: #A1B1B8;    --unit-default-soft: #1C272D;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}