/* ============================================================
   DESIMENT — Design Tokens
   Palette, type stacks, radius/shadow/spacing scale, base reset.
   Nothing but tokens + the base reset lives in this file — every
   component rule lives in style.css.

   Breakpoints used throughout style.css (no CSS custom properties
   for these — media query values can't reference custom props):
     900px  — tablet (nav collapses to hamburger)
     860px / 820px — two-column grids fold to one
     768px  — mobile-lg
     600px / 520px — footer/cta stacking
     480px  — mobile
     360px  — very small
============================================================ */

/* overflow-x: clip (not hidden) so 100vw full-bleed breakouts stay
   accurate on mobile without breaking position:sticky elsewhere. */
html { overflow-x: clip; width: 100%; }
body { overflow-x: clip; width: 100%; max-width: 100%; }

.dsmt-root *, .dsmt-root *::before, .dsmt-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.dsmt-root { -webkit-font-smoothing: antialiased; overflow-x: clip; width: 100%; }

.dsmt-root {
  /* ink / surface */
  --dsmt-ink:        #0A0A0F;
  --dsmt-ink-2:      #44444F;
  --dsmt-ink-3:      #8A8A99;
  --dsmt-bg:         #FFFFFF;
  --dsmt-bg-2:       #F5F5F8;
  --dsmt-bg-3:       #EDEDF2;
  --dsmt-line:       #E4E4EA;
  --dsmt-line-2:     #D0D0DA;

  /* accent */
  --dsmt-blue:       #2D6EF5;
  --dsmt-blue-dim:   rgba(45,110,245,0.08);
  --dsmt-blue-mid:   rgba(45,110,245,0.16);
  --dsmt-green:      #22C55E;

  /* dark surfaces (hero / footer / CTA panels) */
  --dsmt-dark:       #0C0C14;
  --dsmt-dark-2:     #13131E;
  --dsmt-dark-3:     #1C1C2A;
  --dsmt-dark-line:  rgba(255,255,255,0.08);
  --dsmt-dark-line2: rgba(255,255,255,0.14);
  --dsmt-surface:    #FAFAFC;

  /* type */
  --dsmt-font-head:  'Outfit', sans-serif;
  --dsmt-font-body:  'Inter', sans-serif;
  --dsmt-font-mono:  'JetBrains Mono', monospace;

  /* layout scale */
  --dsmt-gutter:     clamp(20px, 5vw, 80px);
  --dsmt-max:        1200px;
  --dsmt-radius:     10px;
  --dsmt-radius-lg:  16px;
  --dsmt-radius-xl:  24px;
  --dsmt-ease:       cubic-bezier(.2,.7,.2,1);
  --dsmt-section-y:  clamp(64px, 8vw, 112px);

  box-sizing: border-box;
  font-family: var(--dsmt-font-body);
  background: var(--dsmt-bg);
  color: var(--dsmt-ink);
  line-height: 1.6;
}

.dsmt-root a { color: inherit; text-decoration: none; }
.dsmt-root img, .dsmt-root svg { display: block; max-width: 100%; }