/* ============================================================
   Tavo — Design tokens + reset + base
   ============================================================ */
:root {
  /* Warm neutral scale (stone) */
  --stone-50:  #FAF9F7;
  --stone-75:  #F7F5F2;
  --stone-100: #F3F1ED;
  --stone-150: #ECE8E2;
  --stone-200: #E2DDD5;
  --stone-300: #CEC8BE;
  --stone-400: #A79F94;
  --stone-500: #837B70;
  --stone-600: #625B51;
  --stone-700: #46413A;
  --stone-800: #2E2A25;
  --stone-900: #1C1A17;
  --stone-950: #131210;

  /* Brand — GroDev terracotta */
  --brand-50:  #FCEEEA;
  --brand-100: #F8DBD3;
  --brand-200: #EFB4A6;
  --brand-300: #E28974;
  --brand:     #B73D2C;
  --brand-600: #A5341F;
  --brand-700: #8A2C1B;
  --brand-800: #6E2417;

  /* Data / accent-secondary — muted teal */
  --data-50:  #E7F2F0;
  --data-100: #C8E3DF;
  --data-300: #6FB3AB;
  --data:     #1F7A73;
  --data-600: #196861;

  /* Semantic */
  --success-50: #E7F3ED; --success: #2E7D5B; --success-700: #226146;
  --warning-50: #FBF1DD; --warning: #B47A16; --warning-700: #8C5F12;
  --danger-50:  #FBEBE9; --danger:  #C0392B; --danger-700:  #99291E;
  --info-50:    #E9F0F7; --info:    #2F6DB0;

  /* Surfaces & text (light app) */
  --bg:            var(--stone-100);
  --surface:       #FFFFFF;
  --surface-2:     var(--stone-75);
  --surface-sunken:var(--stone-150);
  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --text:          var(--stone-900);
  --text-2:        var(--stone-600);
  --text-3:        #78706A; /* AA (4.8:1 on white) */
  --text-inverse:  var(--stone-50);

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  3rem;       /* 48 */
  --fs-5xl:  3.75rem;    /* 60 */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.04em;

  /* Spacing */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;   --sp-12: 6rem;   --sp-16: 8rem;

  /* Radii */
  --r-xs: 5px; --r-sm: 8px; --r: 11px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(28,26,23,.06);
  --shadow-sm: 0 1px 3px rgba(28,26,23,.09), 0 1px 2px rgba(28,26,23,.05);
  --shadow-md: 0 6px 16px rgba(28,26,23,.08), 0 2px 5px rgba(28,26,23,.05);
  --shadow-lg: 0 16px 40px rgba(28,26,23,.13), 0 5px 12px rgba(28,26,23,.07);
  --shadow-xl: 0 28px 70px rgba(28,26,23,.20), 0 10px 24px rgba(28,26,23,.10);
  --ring: 0 0 0 3px rgba(183,61,44,.28);
  --ring-data: 0 0 0 3px rgba(31,122,115,.26);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 130ms;
  --t: 210ms;
  --t-slow: 300ms;

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 60px;
  --content-max: 1180px;
  --z-sticky: 20;
  --z-drawer: 60;
  --z-modal: 80;
  --z-toast: 100;
}

/* Dark surface tokens used inside marketing sections */
.on-dark {
  --surface: #23201C;
  --surface-2: #2A2621;
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.16);
  --text: #F5F2EE;
  --text-2: #C4BCB1;
  --text-3: #97907F;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--brand-100); color: var(--brand-700); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--surface); color: var(--text); padding: 10px 16px;
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg); transition: top var(--t);
}
.skip-link:focus { top: 12px; }

/* ---------- Utilities ---------- */
.u-mono { font-family: var(--font-mono); }
.u-tnum { font-variant-numeric: tabular-nums; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.u-center { display: flex; align-items: center; justify-content: center; }
.u-row { display: flex; align-items: center; }
.u-gap-1 { gap: var(--sp-1); } .u-gap-2 { gap: var(--sp-2); } .u-gap-3 { gap: var(--sp-3); } .u-gap-4 { gap: var(--sp-4); }
.u-grow { flex: 1 1 auto; }
.u-hide { display: none !important; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--stone-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--stone-300); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--stone-400); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}