/* ============================================================
   MEADOW RIDGE PET LODGE — DESIGN TOKENS
   All CSS custom properties live here.
   Never hardcode a hex, size, or radius value in a component.
============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORS — Core Palette
  ---------------------------------------------------------- */
  --color-sage:          #818878;
  --color-sage-dark:     #585D52;
  --color-sage-light:    #A9AEA1;

  --color-charcoal:      #0B1215;
  --color-charcoal-body: #2C3338;
  --color-charcoal-meta: #6C7377;

  --color-cream:         #F8F5ED;
  --color-cream-warm:    #FCF9F1;
  --color-cream-edge:    #F5F1E5;
  --color-stone:         #EFECE3;

  --color-wood:          #A15D25;
  --color-wood-dark:     #8A4E1F;

  --color-paper:         #FFFFFF;

  --color-navy:          #1E2A3A;
  --color-gold:          #B8924A;

  --color-charcoal-10:   rgba(11, 18, 21, 0.1);
  --color-charcoal-20:   rgba(11, 18, 21, 0.2);
  --color-charcoal-40:   rgba(11, 18, 21, 0.4);

  --color-sage-60:       rgba(129, 136, 120, 0.6);
  --color-sage-15:       rgba(129, 136, 120, 0.15);
  --color-sage-30:       rgba(129, 136, 120, 0.3);


  /* ----------------------------------------------------------
     TYPOGRAPHY — Families & Weights
  ---------------------------------------------------------- */
  --font-primary: 'General Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', system-ui, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;


  /* ----------------------------------------------------------
     TYPE SCALE
  ---------------------------------------------------------- */
  --type-h1-display:    clamp(48px, 7vw, 72px);
  --type-h1-display-lh: 1.02;
  --type-h1-display-ls: -2px;

  --type-h1:            clamp(32px, 5vw, 48px);
  --type-h1-lh:         1.05;
  --type-h1-ls:         -1.5px;

  --type-h2:            clamp(34px, 5.5vw, 48px);
  --type-h2-lh:         1.15;
  --type-h2-ls:         -0.8px;

  --type-h3:            22px;
  --type-h3-lh:         1.3;
  --type-h3-ls:         -0.4px;

  --type-lead:          clamp(16px, 2vw, 20px);
  --type-lead-lh:       1.55;

  --type-body:          17px;
  --type-body-lh:       1.65;

  --type-small:         14px;
  --type-small-lh:      1.5;

  --type-label:         15px;
  --type-button:        15px;
  --type-eyebrow:       11px;
  --type-eyebrow-ls:    1.8px;
  --type-meta:          12px;


  /* ----------------------------------------------------------
     SPACING — 8px scale
  ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;


  /* ----------------------------------------------------------
     RADII
  ---------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;


  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(11, 18, 21, 0.04);
  --shadow-md:  0 4px 12px rgba(11, 18, 21, 0.06);
  --shadow-lg:  0 8px 24px rgba(11, 18, 21, 0.08);
  --shadow-nav: 0 1px 0 rgba(11, 18, 21, 0.02);


  /* ----------------------------------------------------------
     MOTION
  ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --speed-fast:   180ms;
  --speed-normal: 240ms;
  --speed-slow:   500ms;

}