/* ============================================================
   OFIRA · DESIGN TOKENS
   Source of truth: the Ofira logo (deep emerald field, gold
   serif lockup, leaf sprig, diamond ornament).
   Theme lock: ONE dark theme across every page.
   ============================================================ */

:root {
  /* ---- Surfaces (emerald ramp, sampled from logo field) ---- */
  --surface-0: #0a201e;              /* page background            */
  --surface-1: #0e2926;              /* raised panels, cards       */
  --surface-2: #133430;              /* hover / higher elevation   */
  --surface-3: #18403a;              /* pressed / highest          */

  /* ---- Gold ramp (from logo lockup) ---- */
  --gold-100: #f3e4c2;
  --gold-200: #ecd6a4;
  --gold-300: #e3c383;
  --gold-400: #d9b06199;             /* only for washes, has alpha */
  --gold-500: #d3a556;               /* primary accent             */
  --gold-600: #c08f3b;               /* CTA fill                   */
  --gold-700: #996f26;               /* deep accent lines          */

  /* ---- Text on emerald ---- */
  --text-hi:  #f2ead7;               /* headings, primary copy     */
  --text-mid: #c8bda3;               /* body, secondary            */
  --text-on-gold: #221a0c;           /* text on gold buttons       */

  /* ---- Lines & focus ---- */
  --line:      rgba(242, 234, 215, 0.14);
  --line-gold: rgba(211, 165, 86, 0.38);
  --ring:      var(--gold-300);

  /* ---- Type ---- */
  --font-display: 'Cormorant', Georgia, serif;
  --font-body:    'Montserrat', system-ui, sans-serif;

  --fs-display: clamp(2.75rem, 7.5vw, 5.25rem);
  --fs-h2:      clamp(2rem, 4.5vw, 3.25rem);
  --fs-h3:      clamp(1.375rem, 2.5vw, 1.75rem);
  --fs-lead:    clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-label:   0.72rem;             /* tracked uppercase labels   */

  --track-label: 0.22em;

  /* ---- Spacing scale (4px base) ---- */
  --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;
  --section: clamp(4.5rem, 10vw, 8rem);   /* vertical section rhythm */
  --gutter:  clamp(1.25rem, 5vw, 4rem);   /* page side padding       */
  --maxw: 1200px;

  /* ---- Shape: one crisp low-radius system ---- */
  --radius: 2px;
  --radius-media: 4px;

  /* ---- Elevation (emerald-tinted, never pure black) ---- */
  --shadow-1: 0 8px 28px rgba(4, 16, 15, 0.45);
  --shadow-2: 0 16px 48px rgba(4, 16, 15, 0.6);

  /* ---- Motion ---- */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out */
  --t-fast: 180ms;
  --t-med:  360ms;
  --t-slow: 700ms;

  /* ---- Texture: jali lattice (diamond grid, from the logo ornament).
     Shape rule: controls stay crisp 2px; display niches (hero arch,
     media frames) use the arch. ---- */
  --jali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0L56 28L28 56L0 28Z' fill='none' stroke='%23d3a556' stroke-opacity='0.09'/%3E%3C/svg%3E");
}