/* =========================================================
   Saldo Sereno — Design Tokens (Mist palette)
   ========================================================= */

:root {
  /* ---- Type ---- */
  --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-xxs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.16em;

  /* ---- Space ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---- Radii ---- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(26, 31, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 31, 28, 0.06);
  --shadow-lg: 0 12px 32px rgba(26, 31, 28, 0.08);

  /* ---- Duration ---- */
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ================= PALETTE: MIST (default) ================= */
:root,
:root[data-palette="mist"] {
  --bg:             #F4F5F3;
  --bg-alt:         #EAEDE9;
  --surface:        #FBFBF9;
  --surface-raised: #FFFFFF;
  --ink:            #1A1F1C;
  --ink-soft:       #414944;
  --ink-muted:      #6B7570;
  --ink-faint:      #A8B0AA;
  --line:           #E0E3DE;
  --line-strong:    #C1C6BF;

  --accent:      #2F5347;
  --accent-soft: #D4E0DA;
  --accent-ink:  #FBFBF9;

  --positive:      #3E6B4E;
  --positive-soft: #DCE6DC;
  --warning:       #8C6D2F;
  --warning-soft:  #EAE0C8;
  --negative:      #6B3A2E;
  --negative-soft: #E6D5CE;
  --info:          #3F5A6B;
  --info-soft:     #D9E1E6;

  --chart-1: #2F5347;
  --chart-2: #5A7D70;
  --chart-3: #8FA89C;
  --chart-4: #C4D0C9;
  --chart-5: #8C6D2F;
  --chart-6: #3F5A6B;

  /* Mobile nav */
  --tab-bar-bg:    rgba(251,251,249,0.92);
  --tab-bar-border: var(--line);
  --hero-gradient: linear-gradient(135deg, #2F5347 0%, #1e3830 100%);
  --shadow-fab:    0 4px 16px rgba(47,83,71,0.4);
}

/* ================= DARK MODE ================= */
:root[data-mode="dark"] {
  --bg:             #121614;
  --bg-alt:         #1A1F1C;
  --surface:        #1A1F1C;
  --surface-raised: #212824;
  --ink:            #E8EBE7;
  --ink-soft:       #B5BCB6;
  --ink-muted:      #7D857F;
  --ink-faint:      #4A514C;
  --line:           #272E2A;
  --line-strong:    #363D38;

  --accent:      #8FB5A5;
  --accent-soft: #24332D;
  --accent-ink:  #121614;

  --positive:      #85B094;
  --positive-soft: #22302A;
  --warning:       #D0AF70;
  --warning-soft:  #2E281B;
  --negative:      #CB8878;
  --negative-soft: #2C2220;
  --info:          #8AA8BA;
  --info-soft:     #1E2830;

  --chart-1: #8FB5A5;
  --chart-2: #6B9486;
  --chart-3: #547166;
  --chart-4: #3E5349;
  --chart-5: #D0AF70;
  --chart-6: #8AA8BA;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* Mobile nav dark */
  --tab-bar-bg:    rgba(26,31,28,0.92);
  --hero-gradient: linear-gradient(135deg, #24332D 0%, #161e1a 100%);
  --shadow-fab:    0 4px 16px rgba(0,0,0,0.5);
}

/* ================= BASE ================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  transition: none;
}

html[data-theme-ready="true"],
html[data-theme-ready="true"] body {
  transition: background-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out);
}

.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: var(--fs-xxs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

.h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 500; margin: 0; }
.h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); font-weight: 500; margin: 0; }
.h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug);  font-weight: 500; margin: 0; }

.muted { color: var(--ink-muted); }
.soft  { color: var(--ink-soft);  }
.faint { color: var(--ink-faint); }

.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ================= Aliases ================= */
:root {
  --bg-surface:  var(--surface);
  --border:      var(--line);
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);

  --fs-9: 9px;

  --z-sidebar:   100;
  --z-topbar:    110;
  --z-offcanvas: 200;
  --z-modal:     300;
  --z-toast:     400;
}

/* ================= Bootstrap variable bridge ================= */
:root {
  --bs-body-bg:        var(--bg);
  --bs-body-color:     var(--ink);
  --bs-border-color:   var(--line);
  --bs-primary-rgb:    47, 83, 71;
  --bs-primary:        var(--accent);
  --bs-secondary-rgb:  107, 117, 112;
  --bs-link-color:     var(--accent);
  --bs-link-hover-color: var(--ink);
  --bs-font-sans-serif: var(--font-sans);
}