/* ========================================
   Design Tokens — Warm Ivory
   ======================================== */

:root {
  /* ---- Colors ---- */
  --bg:               #F6F3EE;
  --bg-alt:           #EDEAE4;
  --surface:          #FFFFFF;
  --surface-elevated: #FFFFFF;
  --border:           rgba(0, 0, 0, 0.07);
  --border-hover:     rgba(0, 0, 0, 0.15);

  --text-primary:     #1A1A1A;
  --text-secondary:   #5A5A5A;
  --text-muted:       #9A9A9A;

  --accent:           #C8963E;
  --accent-hover:     #B5842E;
  --accent-glow:      rgba(200, 150, 62, 0.10);
  --accent-glow-strong: rgba(200, 150, 62, 0.20);

  --sito:             #2DA55D;
  --sito-light:       #E8F5EE;
  --sito-glow:        rgba(45, 165, 93, 0.08);
  --cherry:           #D94466;
  --cherry-light:     #FDE8ED;
  --cherry-glow:      rgba(217, 68, 102, 0.08);

  /* Dark elements */
  --dark:             #1A1A1A;
  --dark-soft:        #2A2A2A;

  /* ---- Typography ---- */
  --font-serif:  'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:     clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm:     clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-base:   clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --text-lg:     clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-xl:     clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --text-2xl:    clamp(1.8rem, 1.4rem + 2vw, 3rem);
  --text-3xl:    clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --text-4xl:    clamp(2.8rem, 2rem + 4vw, 5.5rem);
  --text-display: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* ---- Spacing ---- */
  --space-2xs:   0.25rem;
  --space-xs:    0.5rem;
  --space-sm:    0.75rem;
  --space-md:    1rem;
  --space-lg:    1.5rem;
  --space-xl:    2rem;
  --space-2xl:   3rem;
  --space-3xl:   5rem;
  --space-4xl:   8rem;
  --space-5xl:   12rem;
  --space-section: clamp(6rem, 5rem + 8vw, 12rem);

  /* ---- Layout ---- */
  --max-width:   1280px;
  --gutter:      clamp(1.25rem, 1rem + 2vw, 3rem);

  /* ---- Radius ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   0.2s;
  --duration-base:   0.4s;
  --duration-slow:   0.8s;
  --duration-slower: 1.2s;
}