/* ============================================================
   DRYZIL · DESIGN TOKENS
   ------------------------------------------------------------
   This is the control panel for the whole site.
   Change a value here and it updates everywhere at once.
   Nothing in here draws anything — it only defines the "knobs".
   ============================================================ */

:root {

  /* --- BRAND COLOURS -----------------------------------------
     The core palette. Tweak these to re-skin the site. */
  --mango:        #E58A38;
  --mango-deep:   #C06B27;
  --cherry:       #C24E63;
  --cherry-deep:  #96334A;
  --sage:         #7C9163;
  --sage-deep:    #5D7247;
  --gold:         #E0A93F;

  /* --- SURFACES (page + card backgrounds) ------------------- */
  --bg:           #FCF6EC;   /* page background            */
  --bg-soft:      #F7EADD;   /* alternating section band   */
  --bg-deep:      #F1DCC7;   /* footer / deepest surface   */
  --card:         #FFFFFF;   /* card background            */
  --card-border:  rgba(120, 84, 48, 0.14);

  /* --- TEXT ------------------------------------------------- */
  --text:         #2E2013;   /* headings + primary text    */
  --text-muted:   #73604C;   /* body copy                  */
  --text-faint:   #A8937A;   /* eyebrows, captions, meta   */
  --text-invert:  #FFF8EE;   /* text on dark imagery       */

  /* --- TYPOGRAPHY ------------------------------------------- */
  --font-display: 'Fraunces', Georgia, serif;   /* headings   */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Fluid type scale — grows smoothly between phone & desktop.
     clamp(min, preferred, max) */
  --fs-hero:    clamp(2.5rem, 6.2vw, 5.25rem);
  --fs-display: clamp(2rem, 4.6vw, 3.5rem);
  --fs-h2:      clamp(1.85rem, 4vw, 2.9rem);
  --fs-h3:      clamp(1.2rem, 2.2vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9rem;
  --fs-eyebrow: 0.75rem;

  /* --- SPACING SCALE (consistent rhythm) -------------------- */
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;

  /* Vertical breathing room around each section (fluid). */
  --section-y: clamp(5rem, 11vw, 8.5rem);

  /* --- LAYOUT ---------------------------------------------- */
  --maxw:    1180px;   /* content max width  */
  --gutter:  32px;     /* left/right padding */

  /* --- RADII ----------------------------------------------- */
  --radius-lg:  24px;
  --radius-md:  14px;
  --radius-sm:  10px;
  --radius-pill: 999px;

  /* --- SHADOWS (layered for depth) ------------------------- */
  --shadow-soft: 0 1px 2px rgba(120,72,30,0.05), 0 16px 32px -16px rgba(120,72,30,0.18);
  --shadow-lg:   0 20px 60px -20px rgba(46,32,19,0.35);
  --shadow-glow: 0 12px 28px -8px rgba(224,138,60,0.55);

  /* --- MOTION --------------------------------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);   /* smooth "settle"  */
  --ease-out:  cubic-bezier(.16,1,.3,1);      /* snappy ease-out  */
  --dur-fast:  0.25s;
  --dur:       0.45s;
  --dur-slow:  0.9s;

  /* --- Z-INDEX LAYERS ------------------------------------- */
  --z-progress: 300;
  --z-float:    200;
  --z-nav:      100;
}