/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — Arjun Sharma & Associates
   Theme: "Monograph" — precision, craft, permanence
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Palette ── */
  --bg:            #F5F3EF;
  --bg-alt:        #EDEAE4;
  --surface:       #FFFFFF;
  --ink:           #1A1917;
  --ink-2:         #5A5751;
  --ink-3:         #918D85;
  --rule:          #D8D4CB;
  --rule-light:    #E8E5DD;
  --accent:        #2E5944;
  --accent-hover:  #234538;
  --accent-light:  #E4EDE8;
  --accent-wash:   #F2F7F4;
  --overlay:       #14130E;
  --shadow-sm:     0 1px 3px rgba(26,25,23,0.06), 0 1px 2px rgba(26,25,23,0.04);
  --shadow-md:     0 4px 16px rgba(26,25,23,0.08), 0 2px 4px rgba(26,25,23,0.04);
  --shadow-lg:     0 12px 40px rgba(26,25,23,0.1), 0 4px 12px rgba(26,25,23,0.06);

  /* ── Typography ── */
  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Utility face — drawing annotations: eyebrows, tags, captions, nav index */
  --font-mono:     'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Fluid type scale — minor third (1.2) */
  --text-xs:   clamp(0.72rem,  0.68rem + 0.2vw,  0.8rem);
  --text-sm:   clamp(0.83rem,  0.79rem + 0.2vw,  0.9rem);
  --text-base: clamp(0.95rem,  0.92rem + 0.15vw, 1.05rem);
  --text-lg:   clamp(1.1rem,   1.04rem + 0.3vw,  1.25rem);
  --text-xl:   clamp(1.3rem,   1.18rem + 0.6vw,  1.6rem);
  --text-2xl:  clamp(1.6rem,   1.36rem + 1.2vw,  2.2rem);
  --text-3xl:  clamp(2rem,     1.6rem  + 2vw,    3rem);
  --text-4xl:  clamp(2.5rem,   1.8rem  + 3.5vw,  4.2rem);
  --text-5xl:  clamp(3rem,     2rem    + 5vw,    6rem);

  /* ── Spacing — 8px base ── */
  --sp-1:  0.25rem;  /* 4px */
  --sp-2:  0.5rem;   /* 8px */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.5rem;   /* 24px */
  --sp-6:  2rem;     /* 32px */
  --sp-7:  2.5rem;   /* 40px */
  --sp-8:  3rem;     /* 48px */
  --sp-10: 4rem;     /* 64px */
  --sp-12: 5rem;     /* 80px */
  --sp-16: 7rem;     /* 112px */
  --sp-20: 9rem;     /* 144px */

  /* ── Layout ── */
  --max-w:    1240px;
  --max-w-sm: 720px;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --radius:   3px;
  --radius-lg: 6px;

  /* ── Motion ── */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   150ms;
  --dur:        250ms;
  --dur-slow:   500ms;
  --dur-reveal: 800ms;
}

/* ── Dark scheme (footer, nav overlay) ── */
[data-theme="dark"] {
  --bg:        #141413;
  --bg-alt:    #1E1D1B;
  --surface:   #242320;
  --ink:       #F0EDE7;
  --ink-2:     #B5B1A8;
  --ink-3:     #7D7971;
  --rule:      #3A3835;
  --rule-light:#2A2927;
  --accent:    #5FAF85;
  --accent-hover: #7BC49D;
}