/* =========================================================
   SYNVERIQ — Design tokens
   "Signals becoming systems"
   ========================================================= */

:root {
  /* ---- Color: paper + ink + signal ---------------------- */
  --color-background:        #F4F1EA;
  --color-background-raised: #ECE7DA;
  --color-surface:            #FFFDF8;
  --color-ink:                #16150F;
  --color-ink-strong:         #0B0A07;
  --color-text:                var(--color-ink);
  --color-text-muted:         #6C6656;
  --color-text-faint:         #6E6858;
  --color-border:              #DAD3C1;
  --color-border-strong:      #B9AF95;

  /* signal color — terracotta / signal-red, not blue-purple */
  --color-accent:              #E14C1F;
  --color-accent-strong:      #C33F16;
  --color-accent-soft:        #FBD9C6;

  /* secondary, restrained — deep working-green ("system" state) */
  --color-accent-secondary:   #3E4F3A;
  --color-accent-secondary-soft: #DDE3D2;

  /* inverted section (dark "system" panels) */
  --color-inverse-bg:          #16150F;
  --color-inverse-bg-raised:  #201F17;
  --color-inverse-text:       #F4F1EA;
  --color-inverse-text-muted: #A8A190;
  --color-inverse-border:     #37352A;

  /* semantic */
  --color-success:             #3E4F3A;
  --color-error:                #B3261E;

  /* ---- Type families ------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Fluid type scale (clamp: min, preferred, max) ----- */
  --text-2xs:  0.72rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1rem;
  --text-md:   clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --text-lg:   clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --text-xl:   clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --text-2xl:  clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);
  --text-3xl:  clamp(2.6rem, 1.8rem + 3.6vw, 4.6rem);
  --text-4xl:  clamp(3.2rem, 2rem + 5.6vw, 6.6rem);

  /* ---- Spacing scale -------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8.5rem;
  --space-4xl: 12rem;

  /* fluid section paddings */
  --section-pad-y: clamp(4rem, 3rem + 4vw, 8rem);
  --section-pad-x: clamp(1.25rem, 0.6rem + 3vw, 4rem);

  /* ---- Layout ---------------------------------------------- */
  --container-max: 84rem;
  --grid-columns: 12;
  --grid-gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);

  /* ---- Borders / radii (mostly square — technical, not app-y) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-thin: 1px solid var(--color-border);
  --border-thin-strong: 1px solid var(--color-border-strong);

  /* ---- Motion ------------------------------------------------ */
  --ease-system: cubic-bezier(0.16, 0.8, 0.24, 1);
  --duration-fast: 180ms;
  --duration-base: 420ms;
  --duration-slow: 720ms;

  /* ---- Elevation ---------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11, 10, 7, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(11, 10, 7, 0.18);
}