/* ============================================================
   beedle dataroom — visual system
   Modern: Hanken Grotesk throughout (display + UI)
   Brand: beedle sky-blue, gold .care, heart-red, warm paper
   ============================================================ */

:root{
  /* paper / surfaces */
  --paper:#FAF8F3;
  --paper-2:#F4F0E8;
  --surface:#FFFFFF;
  --line:#E9E4D9;
  --line-2:#F1ECE2;

  /* ink */
  --ink:#14242E;
  --ink-2:#42565F;
  --ink-3:#7E8E94;
  --ink-4:#A9B4B7;

  /* brand */
  --blue:#15B4E7;
  --blue-600:#0E97C6;
  --blue-ink:#0A6E94;
  --blue-wash:#E5F6FD;
  --blue-line:#C5EAF7;

  --gold:#F3BB3A;
  --gold-ink:#B07E0C;
  --gold-wash:#FCF2D9;

  --red:#EC2B3B;
  --red-ink:#C21626;
  --red-wash:#FCE9EB;

  --green:#1E9E6A;
  --green-wash:#E4F4EC;

  /* type */
  /* --serif is kept as a name for display/heading text, but now points at the
     modern grotesk (no more Newsreader/Times-New-Roman serif look). */
  --serif:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  /* geometry */
  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --r-xl:26px;

  --shadow-sm:0 1px 2px rgba(20,36,46,.06), 0 1px 1px rgba(20,36,46,.04);
  --shadow:0 4px 16px -4px rgba(20,36,46,.12), 0 2px 6px -2px rgba(20,36,46,.07);
  --shadow-lg:0 24px 60px -16px rgba(20,36,46,.28), 0 8px 24px -8px rgba(20,36,46,.16);

  --maxw:1320px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit}
::selection{background:var(--blue-wash)}

#root{min-height:100vh}

/* ---------- brand mark (uploaded logo, else company name) ---------- */
.brand{display:inline-flex;align-items:center;user-select:none}
.brand-logo img{display:block;object-fit:contain;max-width:100%}
.brand-name{
  font-family:'Baloo 2','Hanken Grotesk',sans-serif;
  font-weight:700;
  color:var(--blue);
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
}
.brand-name.light{color:#fff}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  border-radius:999px;
  padding:9px 16px;
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
  transition:.16s ease;
  white-space:nowrap;
  color:var(--ink);
  background:transparent;
}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 18px -8px rgba(21,180,231,.7)}
.btn-primary:hover{background:var(--blue-600)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-4);background:#fff}
.btn-quiet{background:transparent;color:var(--ink-2)}
.btn-quiet:hover{background:var(--paper-2);color:var(--ink)}
.btn-danger{background:var(--surface);border-color:var(--red-wash);color:var(--red-ink)}
.btn-danger:hover{background:var(--red-wash)}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-icon{padding:8px;border-radius:10px;width:34px;height:34px;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- pills / chips ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;
  background:var(--paper-2);color:var(--ink-2);
  border:1px solid var(--line);
  white-space:nowrap;
}
.pill svg{width:12px;height:12px}
.pill-blue{background:var(--blue-wash);color:var(--blue-ink);border-color:var(--blue-line)}
.pill-gold{background:var(--gold-wash);color:var(--gold-ink);border-color:#F0DBA0}
.pill-red{background:var(--red-wash);color:var(--red-ink);border-color:#F6CCD0}
.pill-green{background:var(--green-wash);color:#147A50;border-color:#BFE6D2}
.pill-key{font-family:var(--sans);text-transform:none}

/* type-tag dot used in lists */
.kbd{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* utility */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.serif{font-family:var(--serif)}
.muted{color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}
.divider{height:1px;background:var(--line);border:0}

/* scrollbars */
.scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-thumb{background:#DAD3C6;border-radius:99px;border:3px solid transparent;background-clip:padding-box}
.scroll::-webkit-scrollbar-thumb:hover{background:#C7BEAD;background-clip:padding-box}

/* fade/slide helpers
   Transform-only (no opacity:0) so any frozen frame — print, PDF export,
   reduced-motion, or html-to-image clones — still shows content. */
@keyframes fadeUp{from{transform:translateY(10px)}to{transform:none}}
@keyframes fadeIn{from{transform:translateY(4px)}to{transform:none}}
@keyframes scaleIn{from{transform:scale(.975)}to{transform:none}}
.animUp{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}

@media (prefers-reduced-motion: reduce){*{animation-duration:.001s!important}}
@media print{*{animation:none!important}}

/* ---- bilingual EN/FR toggle (shared by both apps) ---- */
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface);flex:none}
.lang-toggle button{border:0;background:transparent;cursor:pointer;padding:5px 11px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-3);transition:.13s}
.lang-toggle button:hover{color:var(--ink)}
.lang-toggle button.on{background:var(--blue);color:#fff}