/* ============================================================
   SYNODEV — Design Tokens
   Palette extracted from the SYNODEV node-graph mark.
   ============================================================ */

:root {
  /* ---- Core palette ---------------------------------------- */
  --paper:        #F6F6F2;
  --paper-2:      #EDEDE7;
  --paper-3:      #E3E4DD;
  --ink:          #0E1A2B;
  --navy:         #16273F;
  --navy-2:       #0B1626;
  --navy-3:       #1D364F;

  --lime:         #C6E24C;
  --lime-deep:    #A9C531;
  --teal:         #45A6CE;
  --teal-deep:    #2E7BA0;
  --ember:        #F5943B;

  /* ---- Light context --------------------------------------- */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --muted:        rgba(14, 26, 43, 0.58);
  --faint:        rgba(14, 26, 43, 0.38);
  --line:         rgba(14, 26, 43, 0.13);
  --line-strong:  rgba(14, 26, 43, 0.26);
  --panel:        #FFFFFF;

  /* ---- Dark context ---------------------------------------- */
  --dbg:          var(--navy-2);
  --dbg-2:        var(--navy);
  --dfg:          #EAF0F5;
  --dmuted:       rgba(234, 240, 245, 0.62);
  --dfaint:       rgba(234, 240, 245, 0.38);
  --dline:        rgba(234, 240, 245, 0.14);
  --dline-strong: rgba(234, 240, 245, 0.28);
  --dpanel:       rgba(29, 54, 79, 0.55);

  /* ---- Typography ------------------------------------------ */
  --font-display: 'Satoshi', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --weight-display: 300;

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem);
  --step-0:  clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --step-1:  clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem);
  --step-2:  clamp(1.75rem, 1.45rem + 1.3vw, 2.7rem);
  --step-3:  clamp(2.3rem, 1.6rem + 3vw, 4.75rem);
  --step-4:  clamp(3rem, 1.8rem + 5.2vw, 7.5rem);
  --step-5:  clamp(2.6rem, 1rem + 8.4vw, 11rem);
  --step-6:  clamp(4rem, 1.5rem + 14vw, 18rem);

  /* ---- Spacing --------------------------------------------- */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  5rem;
  --space-2xl: 8rem;
  --space-3xl: 12rem;
  --space-4xl: 18rem;

  /* ---- Layout ---------------------------------------------- */
  --container: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 58ch;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  /* ---- Motion ---------------------------------------------- */
  /* One shared dialect so every animation feels authored by one hand. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);      /* expo-out */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 0.28s;
  --dur-2: 0.5s;
  --dur-3: 0.9s;
  --dur-4: 1.4s;

  --header-h: 76px;
  --z-content: 2;
  --z-header: 40;
  --z-overlay: 60;
  --z-cursor: 80;
}

/* Phone type scale — keep hard-wrapped headline lines inside the viewport */
@media (max-width: 640px) {
  :root {
    --step-4: clamp(1.8rem, 8vw, 2.4rem);
    --step-5: clamp(1.75rem, 8.4vw, 2.25rem);
    --step-6: clamp(3rem, 15vw, 4.5rem);
  }
}