/* ============================================================
   bgn-33-ds — design system personal Bogdan (bgn.ro)
   v0.1.3 · 26 aug 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;

  /* 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 */

  /* tipografie */
  --font-ui: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;
  }
}
: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;
}

/* ---------- 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;
}