/* ============================================
   ROOT & RISE — Design Tokens
   ============================================ */

:root {
  /* ---- Colors ---- */
  --color-primary:        #2C4A3E;
  --color-primary-light:  #3D6B5C;
  --color-primary-dark:   #1E352C;

  --color-secondary:      #8FA898;
  --color-secondary-light:#A8BFB0;

  --color-background:     #F7F3EE;
  --color-background-alt: #EFEAE3;
  --color-surface:        #FFFFFF;

  --color-accent:         #B8856C;
  --color-accent-light:   #D4A68E;
  --color-accent-dark:    #9A6B52;

  --color-text:           #2D2D2D;
  --color-text-light:     #5A5A5A;
  --color-text-muted:     #8A8A8A;
  --color-text-inverse:   #F7F3EE;

  --color-border:         #DDD6CC;
  --color-border-light:   #EBE5DC;

  --color-success:        #4A7C59;
  --color-error:          #B84A4A;
  --color-warning:        #C49A4A;

  /* ---- Typography ---- */
  --font-display:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;

  --fs-hero:    clamp(2.75rem, 5vw + 1rem, 5rem);
  --fs-h1:      clamp(2.25rem, 3vw + 0.75rem, 3.75rem);
  --fs-h2:      clamp(1.875rem, 2.5vw + 0.5rem, 3rem);
  --fs-h3:      clamp(1.375rem, 1.5vw + 0.375rem, 1.75rem);
  --fs-h4:      clamp(1.125rem, 1vw + 0.375rem, 1.375rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.75rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.65;
  --lh-loose:   1.8;

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

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-wider:   0.12em;

  /* ---- Spacing ---- */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  --section-padding: clamp(4rem, 8vw, 8rem);
  --container-max:   1280px;
  --container-narrow: 800px;

  /* ---- Borders & Radii ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  32px;
  --radius-full: 50%;

  --border-thin:   1px solid var(--color-border);
  --border-subtle: 1px solid var(--color-border-light);

  /* ---- Shadows ---- */
  --shadow-sm:    0 1px 3px rgba(45, 45, 45, 0.06);
  --shadow-md:    0 4px 12px rgba(45, 45, 45, 0.08);
  --shadow-lg:    0 8px 30px rgba(45, 45, 45, 0.1);
  --shadow-xl:    0 16px 50px rgba(45, 45, 45, 0.12);
  --shadow-card:  0 2px 8px rgba(45, 45, 45, 0.04), 0 8px 24px rgba(45, 45, 45, 0.06);

  /* ---- Transitions ---- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ---- Z-Index ---- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ---- Header ---- */
  --header-height: 72px;
}

@media (min-width: 1024px) {
  :root {
    --header-height: 80px;
  }
}