:root {
  /* Brand palette */
  --brand-teal:        #0DC8B1;
  --brand-teal-dark:   #069987;
  --brand-teal-bright: #1CE6BE;

  /* Surface */
  --ink:         #0A1F1D;
  --ink-soft:    #0C1B19;
  --paper:       #F7F5F0;
  --paper-dim:   #EFEBE2;
  --card:        #FFFDF8;
  --white:       #FFFFFF;

  /* Text */
  --text-primary:   #0A1F1D;
  --text-on-dark:   rgba(255,255,255,.92);
  --text-muted:     #8B97A5;
  --text-muted-dark:rgba(255,255,255,.58);

  /* Lines */
  --line:      #E5E8EC;
  --line-soft: rgba(255,255,255,.10);
  --line-dark: rgba(10,31,29,.10);

  /* Typography */
  --font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;

  /* Spacing scale (4px-based) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Radii */
  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-cta: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(10,31,29,.06);
  --shadow-md: 0 8px 24px rgba(10,31,29,.10);
  --shadow-lg: 0 24px 60px rgba(10,31,29,.16);

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-snap: cubic-bezier(.16,1,.3,1);
  --t-fast: .16s;
  --t-med:  .28s;
  --t-slow: .56s;

  /* Container */
  --container:    1280px;
  --container-wide: 1440px;
  /* 20px на совсем маленьких, 4vw между, max 48 на больших */
  --page-pad:     clamp(20px, 4vw, 48px);
}
@media (max-width: 640px) {
  :root { --page-pad: 18px; }
}