/* ==========================================================================
   DESIGN TOKENS
   A bold, editorial "creative agency" system: cream/ink base, five saturated
   accent colors, a geometric display sans paired with a warm display serif,
   an asymmetric single-corner radius as the recurring shape signature, and a
   set of named eases driving every transition/animation in the system.
   ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --color-bg:          #f3efeb; /* cream — primary page background */
  --color-bg-raised:   #ffffff;
  --color-ink:         #1e1e1e; /* near-black — primary text */
  --color-ink-black:   #000000;
  --color-ink-60:      rgba(30, 30, 30, 0.6);
  --color-ink-40:      rgba(30, 30, 30, 0.4);
  --color-ink-20:      rgba(30, 30, 30, 0.2);
  --color-white:       #ffffff;
  --color-white-70:    rgba(255, 255, 255, 0.7);
  --color-white-40:    rgba(255, 255, 255, 0.4);

  /* ---- Color: accents ---- */
  --color-lime:        #e0ff98; /* signature CTA color */
  --color-lime-light:  #f7ffdc;
  --color-purple:      #8072ff;
  --color-purple-soft: #9c93e8;
  --color-purple-10:   rgba(128, 114, 255, 0.1);
  --color-lilac:       #bfb8ff;
  --color-peach:       #ffddc4;
  --color-sky:         #d1f3f5;

  /* ---- Color: semantic aliases ---- */
  --color-surface:        var(--color-bg);
  --color-surface-dark:   var(--color-ink);
  --color-text:           var(--color-ink);
  --color-text-muted:     var(--color-ink-60);
  --color-text-faint:     var(--color-ink-20);
  --color-text-on-dark:   var(--color-bg);
  --color-accent:         var(--color-lime);
  --color-accent-text:    var(--color-ink);

  /* ---- Typography ----
     Display font mirrors a geometric grotesk (e.g. Söhne/Neue Montreal);
     licensed originals aren't bundled — swap the first family for your
     licensed font, or keep the free fallbacks (General Sans / Inter Tight).
     Serif mirrors a warm display serif (e.g. ABC Arizona) — Fraunces is the
     closest free stand-in and is loaded by default. */
  --font-display: "Soehne", "General Sans", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "ABC Arizona Mix", "Fraunces", "Iowan Old Style", Georgia, serif;

  --tracking-tight:  -0.03em;
  --tracking-tighter: -0.045em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-eyebrow:  0.8125rem;                              /* 13px, fixed */
  --text-small:    clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
  --text-body:     clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  --text-body-lg:  clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --text-h4:       clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --text-h3:       clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --text-h2:       clamp(3rem, 2.1rem + 3.8vw, 5.5rem);
  --text-h1:       clamp(2.5rem, 1.5rem + 4.5vw, 6.5rem);

  --leading-tight:  0.95;
  --leading-snug:   1.1;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* ---- Shape: the asymmetric single-corner radius is the brand signature.
     Everything from buttons to photos rounds exactly one corner. ---- */
  --radius-xs: 10px;
  --radius-sm: 18px;
  --radius-md: 32px;
  --radius-lg: 48px;
  --radius-xl: 80px;

  /* ---- Spacing scale ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --gap-x: 1.6rem;                 /* grid gutter, matches source measurement */
  --container-max: 90rem;          /* 1440px */
  --section-pad-y: clamp(4rem, 3rem + 5vw, 8rem);
  --section-pad-x: clamp(1.25rem, 1rem + 2vw, 4rem);

  /* ---- Motion: named eases captured from the reference site ---- */
  --ease-out-quart:    cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in-out-quad:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-in-quart:     cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quad:     cubic-bezier(0.5, 1, 0.89, 1);
  --ease-out-cubic:    cubic-bezier(0.33, 1, 0.68, 1);

  --duration-fast:   0.3s;
  --duration-base:   0.6s;
  --duration-slow:   1s;
  --duration-slower: 1.6s;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 12px rgba(30, 30, 30, 0.06);
  --shadow-md: 0 12px 32px rgba(30, 30, 30, 0.10);
  --shadow-lg: 0 24px 64px rgba(30, 30, 30, 0.16);
}

/* Dark-surface context: flips text/muted roles for sections on --color-ink */
.on-dark {
  --color-text: var(--color-bg);
  --color-text-muted: var(--color-white-70);
  --color-text-faint: var(--color-white-40);
}