/* ============================================================
   bgn-33-ds — design system personal Bogdan (bgn.ro)
   v0.3.0 · 8 oct 2026
   Limbaj vizual: Notion (tokenuri preluate din aplicația Notion)
   Sursa unică de adevăr. Orice UI bgn.ro folosește var(--*),
   niciodată hex hardcodat. Modificările trec prin cheatsheet.md
   (changelog + bump de versiune).
   ============================================================ */

/* ---------- 1. TOKENURI · LIGHT (default) ---------- */
:root{
  /* suprafețe */
  --bg:#FFFFFF;
  --sidebar:#F7F7F5;
  --surface:#FFFFFF;
  --surface-2:#F1F1EF;
  --hover:rgba(55,53,47,.06);
  --active:rgba(55,53,47,.08);

  /* text */
  --text:#37352F;
  --muted:rgba(55,53,47,.65);
  --faint:rgba(55,53,47,.45);

  /* borduri */
  --border:rgba(55,53,47,.09);
  --border-strong:rgba(55,53,47,.16);

  /* accent — albastrul Notion */
  --accent:#2383E2;
  --accent-hover:#1B6EC2;
  --accent-soft:rgba(35,131,226,.14);
  --accent-text:#2383E2;

  /* semantice */
  --danger:#C4554D;  --danger-soft:#FAECEC;
  --ok:#548164;      --ok-soft:#EEF3ED;
  --warn:#C29343;    --warn-soft:#FAF3DD;

  /* paleta de tag-uri Notion (10) — text / fundal */
  --tag-gray:#787774;   --tag-gray-bg:#F1F1EF;
  --tag-brown:#976D57;  --tag-brown-bg:#F3EEEE;
  --tag-orange:#CC782F; --tag-orange-bg:#F8ECDF;
  --tag-yellow:#C29343; --tag-yellow-bg:#FAF3DD;
  --tag-green:#548164;  --tag-green-bg:#EEF3ED;
  --tag-blue:#487CA5;   --tag-blue-bg:#E9F3F7;
  --tag-purple:#8A67AB; --tag-purple-bg:#F6F3F8;
  --tag-pink:#B35488;   --tag-pink-bg:#F9F2F5;
  --tag-red:#C4554D;    --tag-red-bg:#FAECEC;

  /* evenimente pasive (ex: calendar fundal) */
  --event-bg:#F1F1EF;   --event-text:#787774;
  --now:#C4554D;

  /* strat sub foaia de jos (mobil) */
  --scrim:rgba(15,15,15,.32);

  /* formă */
  --r-xs:3px;   /* chips, tags, badges, checkbox */
  --r-sm:4px;   /* inputs, blocuri mici */
  --r-md:6px;   /* butoane, carduri, liste */
  --r-full:99px;/* pills de filtrare */
  --r-lg:12px;  /* foaie de jos (bottom sheet) pe mobil */

  /* tipografie */
  --font-ui:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Consolas,Menlo,monospace;
}

/* ---------- 1b. TOKENURI · DARK ---------- */
/* trei stări de temă: system (nimic stampat) + data-theme explicit */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#191919; --sidebar:#202020; --surface:#191919; --surface-2:#252525;
    --hover:rgba(255,255,255,.055); --active:rgba(255,255,255,.08);
    --text:#D4D4D4; --muted:rgba(255,255,255,.46); --faint:rgba(255,255,255,.28);
    --border:rgba(255,255,255,.13); --border-strong:rgba(255,255,255,.22);
    --accent:#2383E2; --accent-hover:#3B93EE;
    --accent-soft:rgba(35,131,226,.22); --accent-text:#529CCA;
    --danger:#BE524B; --danger-soft:#332523;
    --ok:#4F9768;     --ok-soft:#242B26;
    --warn:#C19138;   --warn-soft:#372E20;
    --tag-gray:#9B9B9B;   --tag-gray-bg:#252525;
    --tag-brown:#A27763;  --tag-brown-bg:#2E2724;
    --tag-orange:#CB7B37; --tag-orange-bg:#36291F;
    --tag-yellow:#C19138; --tag-yellow-bg:#372E20;
    --tag-green:#4F9768;  --tag-green-bg:#242B26;
    --tag-blue:#447ACB;   --tag-blue-bg:#1F282D;
    --tag-purple:#865DBB; --tag-purple-bg:#2A2430;
    --tag-pink:#BA4A78;   --tag-pink-bg:#2E2328;
    --tag-red:#BE524B;    --tag-red-bg:#332523;
    --event-bg:#252525;   --event-text:#9B9B9B;
    --now:#BE524B;
    --scrim:rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#191919; --sidebar:#202020; --surface:#191919; --surface-2:#252525;
  --hover:rgba(255,255,255,.055); --active:rgba(255,255,255,.08);
  --text:#D4D4D4; --muted:rgba(255,255,255,.46); --faint:rgba(255,255,255,.28);
  --border:rgba(255,255,255,.13); --border-strong:rgba(255,255,255,.22);
  --accent:#2383E2; --accent-hover:#3B93EE;
  --accent-soft:rgba(35,131,226,.22); --accent-text:#529CCA;
  --danger:#BE524B; --danger-soft:#332523;
  --ok:#4F9768;     --ok-soft:#242B26;
  --warn:#C19138;   --warn-soft:#372E20;
  --tag-gray:#9B9B9B;   --tag-gray-bg:#252525;
  --tag-brown:#A27763;  --tag-brown-bg:#2E2724;
  --tag-orange:#CB7B37; --tag-orange-bg:#36291F;
  --tag-yellow:#C19138; --tag-yellow-bg:#372E20;
  --tag-green:#4F9768;  --tag-green-bg:#242B26;
  --tag-blue:#447ACB;   --tag-blue-bg:#1F282D;
  --tag-purple:#865DBB; --tag-purple-bg:#2A2430;
  --tag-pink:#BA4A78;   --tag-pink-bg:#2E2328;
  --tag-red:#BE524B;    --tag-red-bg:#332523;
  --event-bg:#252525;   --event-text:#9B9B9B;
  --now:#BE524B;
  --scrim:rgba(0,0,0,.55);
}

/* ---------- 2. BAZĂ ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 14px/1.5 var(--font-ui);
}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-md)}

/* ---------- 3. COMPONENTE ---------- */

/* Buton */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:var(--r-md);
  font-weight:600;font-size:13px;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong)}
.btn.ghost:hover{background:var(--hover)}

/* Pill de filtrare */
.pill{
  padding:5px 12px;border-radius:var(--r-full);
  border:1px solid var(--border-strong);
  font-size:12.5px;font-weight:500;color:var(--muted);background:var(--surface);
}
.pill:hover{color:var(--text);background:var(--hover)}
.pill.on{background:var(--accent-soft);color:var(--accent-text);border-color:transparent;font-weight:600}

/* Tag (stil Notion) — combină .tag cu o clasă de culoare */
.tag{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:var(--r-xs);
  font-size:11px;font-weight:600;
}
.tag.gray{color:var(--tag-gray);background:var(--tag-gray-bg)}
.tag.brown{color:var(--tag-brown);background:var(--tag-brown-bg)}
.tag.orange{color:var(--tag-orange);background:var(--tag-orange-bg)}
.tag.yellow{color:var(--tag-yellow);background:var(--tag-yellow-bg)}
.tag.green{color:var(--tag-green);background:var(--tag-green-bg)}
.tag.blue{color:var(--tag-blue);background:var(--tag-blue-bg)}
.tag.purple{color:var(--tag-purple);background:var(--tag-purple-bg)}
.tag.pink{color:var(--tag-pink);background:var(--tag-pink-bg)}
.tag.red{color:var(--tag-red);background:var(--tag-red-bg)}

/* Chip de date (efort, ore) — mono */
.chip{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:11px;font-weight:500;
  padding:2px 7px;border-radius:var(--r-xs);
  background:var(--surface-2);color:var(--event-text);
}
.chip.accent{background:var(--accent-soft);color:var(--accent-text)}

/* Card / listă — flat, bordură hairline, fără umbre */
.card{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.card-pad{padding:18px}

/* Rând de listă */
.rowline{display:flex;align-items:center;gap:11px;padding:10px 14px;border-bottom:1px solid var(--border)}
.rowline:last-child{border-bottom:none}
.rowline:hover{background:var(--hover)}

/* Checkbox (stil Notion: pătrat, fill albastru) */
.cb{
  width:16px;height:16px;border-radius:var(--r-xs);
  border:1.5px solid var(--border-strong);background:var(--surface);
  display:grid;place-items:center;padding:0;flex-shrink:0;
}
.cb:hover{border-color:var(--accent)}
.cb.checked{background:var(--accent);border-color:var(--accent)}

/* Input / select */
.input{
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:7px 10px;font-size:13px;background:var(--surface);
}
.input:focus{outline:none;border-color:var(--accent)}
.input::placeholder{color:var(--faint)}

/* Badge semantic */
.badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-xs)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}

/* Sidebar de aplicație */
.sidebar{background:var(--sidebar);border-right:1px solid var(--border)}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:var(--r-md);
  color:var(--muted);font-weight:500;font-size:13.5px;text-align:left;
}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item.active{background:var(--active);color:var(--text);font-weight:600}

/* Card de task (pattern „Clean") — metadatele sunt TEXT, nu bule;
   culoarea de proiect apare doar ca punct în rândul de meta */
.task-card{
  border:1px solid var(--border);border-radius:8px;background:var(--surface);
  padding:10px 12px;cursor:pointer;text-align:left;width:100%;
}
.task-card:hover{border-color:var(--border-strong);background:var(--hover)}
.task-card .tc-top{display:flex;align-items:flex-start;gap:9px}
.task-card .tc-title{flex:1;font-weight:500;font-size:13.5px;line-height:1.35}
.meta-line{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:5px;padding-left:25px;font-size:12px;color:var(--muted);
}
.meta-line .mdot{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.meta-line .m-mono{font-family:var(--font-mono);font-size:11.5px}
.meta-line .m-danger{color:var(--danger)}
.meta-line .sep{color:var(--faint)}

/* Toast */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--text);color:var(--bg);
  font-size:13px;font-weight:500;padding:9px 16px;border-radius:var(--r-md);
  z-index:50;
}

/* ---------- 4. MOBIL (v0.3.0) ----------
   Ecrane sub 640px: text de bază 16px (iOS nu mai face zoom pe inputuri),
   ținte de atins de cel puțin 44px, nimic sub bara de jos sau sub notch. */
@media (max-width:640px){
  body{font-size:16px}
  .input,.textarea{font-size:16px;padding:10px 12px}
  .btn{min-height:44px;font-size:15px;padding:10px 16px;justify-content:center}
  .rowline{min-height:48px}
}
.textarea{
  width:100%;min-height:96px;resize:vertical;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:9px 11px;font-size:14px;line-height:1.5;background:var(--surface);color:var(--text);
}
.textarea:focus{outline:none;border-color:var(--accent)}
.textarea::placeholder{color:var(--faint)}

/* Shell mobil: antet + conținut + bară de navigare jos */
.m-shell{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
.m-top{
  position:sticky;top:0;z-index:10;background:var(--bg);
  padding:calc(env(safe-area-inset-top) + 10px) 16px 8px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.m-title{font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.01em;margin:6px 0 2px}
.m-sub{font-size:14px;color:var(--muted);margin:0}
.m-body{flex:1;padding:8px 16px calc(84px + env(safe-area-inset-bottom))}

/* Bara de navigare jos — 3–4 destinații, iconiță SVG + etichetă */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--bg);border-top:1px solid var(--border);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tab-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-height:48px;justify-content:center;border-radius:var(--r-md);
  color:var(--muted);font-size:11px;font-weight:500;
}
.tab-item svg{width:22px;height:22px}
.tab-item.active{color:var(--text);font-weight:600}
.tab-item .count{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:10px;
  color:var(--accent-text);
}

/* Progres liniar (ex. „4 din 20") */
.progress{height:3px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden}
.progress > i{display:block;height:100%;background:var(--accent);border-radius:inherit}
.progress-label{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted)}

/* Card de validat — o afirmație de confirmat sau de corectat.
   Afirmația e textul principal; restul e text simplu, fără cutii în cutie. */
.vcard{
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;
}
.vc-meta{font-size:12.5px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vc-meta .sep{color:var(--faint)}
.vc-q{font-size:15px;font-weight:600;line-height:1.4;margin:0}
.vc-ctx{font-size:14px;color:var(--muted);line-height:1.5;margin:0}
.vc-claim{
  font-size:17px;font-weight:500;line-height:1.45;margin:0;
  border-left:2px solid var(--accent);padding:2px 0 2px 12px;
}
.vc-quote{font-size:13.5px;color:var(--muted);font-style:italic;line-height:1.5;margin:0}
.vc-actions{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;margin-top:4px}
.vc-actions .btn{min-height:48px;justify-content:center}
.btn.no{background:var(--surface);color:var(--danger);border:1px solid var(--border-strong)}
.btn.no:hover{background:var(--danger-soft)}

/* Foaie de jos (bottom sheet) pentru corecturi */
.scrim{position:fixed;inset:0;z-index:30;background:var(--scrim)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:31;
  background:var(--surface);border:1px solid var(--border-strong);border-bottom:none;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px 16px calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;max-height:85dvh;overflow:auto;
}
.sheet-grip{width:36px;height:4px;border-radius:var(--r-full);background:var(--border-strong);margin:0 auto 4px}
.sheet-title{font-size:16px;font-weight:700;margin:0}
.sheet .btn{justify-content:center;min-height:48px}

/* Pagină de document (profil) — ritmul unei pagini Notion */
.doc{max-width:680px;margin:0 auto}
.doc h1{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.01em;margin:8px 0 6px}
.doc h2{font-size:19px;font-weight:700;line-height:1.3;margin:28px 0 8px}
.doc p{margin:6px 0;line-height:1.6}
.doc .lead{color:var(--muted)}
.callout{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--surface-2);border-radius:var(--r-md);padding:12px 14px;
  font-size:14px;line-height:1.5;
}
.callout svg{flex-shrink:0;width:18px;height:18px;margin-top:1px;color:var(--muted)}
/* Un punct din profil: afirmația + un rând de meta (dovezi, stare) */
.pitem{padding:10px 0;border-bottom:1px solid var(--border)}
.pitem:last-child{border-bottom:none}
.pitem .p-text{font-size:15px;line-height:1.5}
.pitem .meta-line{padding-left:0}
.m-ok{color:var(--ok)}
/* Ce s-a schimbat într-o versiune nouă de profil */
.diff-ins{background:var(--ok-soft);color:var(--text);border-radius:var(--r-xs);padding:0 2px;text-decoration:none}
.diff-del{background:var(--danger-soft);color:var(--muted);border-radius:var(--r-xs);padding:0 2px;text-decoration:line-through}

/* Starea conexiunii (aplicații care merg și fără internet) */
.netstat{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.netstat i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.netstat.offline i{background:var(--warn)}