/* ============================================
   STUDIO NGAI — Brand Tokens
   ============================================ */

:root {
  /* ---------- Core palette ---------- */
  --ink:        #1A1816;   /* warm near-black — primary text, dark surfaces  */
  --ink-soft:   #2C2925;   /* secondary dark — softened ink                  */
  --moss:       #2C4A3A;   /* primary brand — deep jewel forest              */
  --moss-deep:  #1E3528;   /* darker moss for depth                          */
  --moss-soft:  #4A6B58;   /* lighter moss for tints                         */
  --garnet:     #7A2E2C;   /* accent — warm ruby/oxblood                     */
  --garnet-soft:#9C4A47;   /* lighter garnet                                 */

  /* ---------- Neutrals (cool-warm, no cream) ---------- */
  --paper:      #F6F3EC;   /* primary background — warm bone                 */
  --bone:       #EDEAE2;   /* secondary surface                              */
  --mist:       #FBFAF6;   /* lightest — almost white                        */
  --clay:       #736658;   /* mid taupe — captions, dividers                 */
  --stone:      #C9C2B5;   /* light stone — borders                          */
  --hairline:   rgba(26, 24, 22, 0.10);

  /* ---------- Semantic ---------- */
  --success:    #3D6B4F;   /* moss-tinted */
  --warning:    #B08948;   /* warm amber (used sparingly) */
  --error:      #8C3A36;   /* garnet-tinted */
  --info:       #3D4A5C;   /* quiet slate */

  /* ---------- Typography ---------- */
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:    "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale (display-led) */
  --t-mega:    clamp(72px, 9vw, 144px);
  --t-hero:    clamp(56px, 6.5vw, 104px);
  --t-display: clamp(40px, 4.5vw, 72px);
  --t-h1:      clamp(32px, 3.2vw, 48px);
  --t-h2:      clamp(24px, 2.2vw, 32px);
  --t-h3:      20px;
  --t-body-lg: 19px;
  --t-body:    16px;
  --t-small:   14px;
  --t-mono:    12px;
  --t-eyebrow: 11px;

  /* ---------- Space ---------- */
  --gutter: clamp(20px, 4vw, 64px);
  --section-y: clamp(80px, 10vw, 160px);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-med: 400ms;
  --dur-slow: 700ms;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "ss01";
  overflow-x: hidden;
}

::selection { background: var(--moss); color: var(--paper); }

/* ---------- Keyboard focus ---------- */
:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Typographic primitives ---------- */
.display, h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.display { line-height: 0.95; }
.sans { font-family: var(--font-sans); }
.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "ss02"; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
}

.italic { font-style: italic; }