/* Marfani Frame Maker — design tokens (v2, gilded dark). */

:root {
  /* ------------------------------------------------------------ colour --
     A dark room lit by one warm lamp: gilt reads richest on a deep ground,
     which is exactly why real galleries hang gold frames on dark walls. */
  --bg:        #06091A;
  --bg-2:      #0B1A42;
  --bg-3:      #121F4F;
  --surface:   rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.08);
  --line:      rgba(255, 255, 255, 0.10);
  --line-2:    rgba(255, 255, 255, 0.18);

  --text:      #F3EFE4;
  --text-dim:  rgba(243, 239, 228, 0.70);
  --text-mute: rgba(243, 239, 228, 0.50);

  --gold:      #D9AE3C;
  --gold-lite: #F7E7B0;
  --gold-mid:  #C79A2E;
  --gold-dark: #8A6514;
  --gold-glow: rgba(217, 174, 60, 0.35);
  --gilt: linear-gradient(135deg, #F7E7B0 0%, #D9AE3C 28%, #C79A2E 52%, #F1D98A 72%, #8A6514 100%);

  /* The pressed colour. WhatsApp's own green with dark text on it: 9.9:1. */
  --wa:        #25D366;
  --wa-ink:    #06091A;
  --wa-hover:  #3BE07A;

  --shadow-1:  0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-2:  0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 10px 20px -10px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 20px 60px -20px var(--gold-glow);

  /* -------------------------------------------------------------- type -- */
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --t-hero:  clamp(2.4rem, 1rem + 4.6vw, 4.8rem);
  --t-xl:    clamp(1.9rem, 1.1rem + 3vw, 3.5rem);
  --t-lg:    clamp(1.4rem, 1.05rem + 1.4vw, 2.05rem);
  --t-md:    clamp(1.08rem, 0.98rem + 0.45vw, 1.25rem);
  --t-body:  clamp(0.96rem, 0.93rem + 0.15vw, 1.02rem);
  --t-sm:    0.9rem;
  --t-xs:    0.8125rem;
  --t-micro: 0.6875rem;

  --track-label: 0.18em;
  --track-tight: -0.03em;

  /* ------------------------------------------------------------- space -- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 11rem;
  --section-y: clamp(3.25rem, 1.75rem + 3.6vw, 5.5rem);
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  --max: 88rem;
  --max-narrow: 60rem;
  --measure: 62ch;

  --radius: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------ motion -- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-mitre: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  --z-cursor: 1200;
  --z-intro: 1100;
  --z-edge: 900;
  --z-nav: 800;
}