/* ============================================================
   DYVA design tokens — Apple-esque, calm, professional SaaS
   ============================================================ */
:root {
  /* — Neutrals (soft, airy) — */
  --bg:            #f5f6f8;
  --bg-elev:       #ffffff;
  --card:          #ffffff;
  --sidebar:       #fbfbfd;
  --ink:           #1d1d1f;   /* Apple near-black */
  --ink-2:         #55565b;
  --ink-3:         #86868b;
  --hairline:      #e6e7ea;
  --hairline-2:    #eef0f3;

  /* — Brand accent (refined teal-blue; CVA-aligned) — */
  --accent:        #0a84c0;
  --accent-ink:    #086b9c;
  --accent-soft:   #e8f4fb;
  --accent-2:      #00b4a8;   /* secondary highlight */
  --brand-navy:    #0b1220;

  /* — Semantic (Apple system) — */
  --green:  #34c759;
  --amber:  #ff9f0a;
  --red:    #ff3b30;
  --green-soft: #e7f9ee;
  --amber-soft: #fff4e3;
  --red-soft:   #ffebe9;

  /* — Data-viz palette (used by Plotly theme) — */
  --c1:#0a84c0; --c2:#00b4a8; --c3:#5e5ce6; --c4:#ff9f0a;
  --c5:#ff375f; --c6:#34c759; --c7:#af52de; --c8:#64d2ff;

  /* — Typography — */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-hero: 2rem;
  --fs-h1: 1.5rem;
  --fs-h2: 1.15rem;
  --fs-body: 0.94rem;
  --fs-sm: 0.82rem;
  --fs-xs: 0.72rem;

  /* — Radii — */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* — Shadows (soft, layered — no hard borders) — */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.05);
  --shadow-md: 0 2px 6px rgba(16,24,40,.06), 0 12px 32px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 48px rgba(16,24,40,.14);

  /* — Motion — */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .2s;

  /* — Layout — */
  --sidebar-w: 236px;
  --topbar-h: 62px;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}
h1,h2,h3,h4 { font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
a { color: var(--accent-ink); text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--accent-soft); }

/* Scrollbars — thin, unobtrusive */
* { scrollbar-width: thin; scrollbar-color: #cfd2d8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d3d6dc; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #b9bdc6; background-clip: content-box; }