@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* Colors */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-muted: #5b5b5b;
    --color-border: #e6e6e6;
  
    --color-brand: #0f3d2e;      /* deep green (premium) */
    --color-brand-2: #0b2a20;    /* darker */
    --color-accent: #c9a46b;     /* warm gold accent (subtle) */
  
    --color-success: #1f7a3f;
    --color-danger: #b42318;
  
    /* Typography */
    --font-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
    --font-sans: "Poppins", "Avenir Next", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
  
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-md: 1rem;      /* 16px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;   /* 20px */
    --text-2xl: 1.5rem;   /* 24px */
    --text-3xl: 2rem;     /* 32px */
    --text-4xl: 2.5rem;   /* 40px */
    --text-5xl: 3rem;     /* 48px */
    --heading-1: clamp(2.4rem, 4.8vw, 5.4rem);
    --heading-2: clamp(1.9rem, 2.8vw, 3.3rem);
    --heading-3: clamp(1.4rem, 1.4vw, 2.2rem);
    --heading-4: clamp(1.1rem, 0.8vw, 1.45rem);
  
    --line-tight: 1.15;
    --line-normal: 1.5;
    --line-copy: 1.65;
    --tracking-heading: -0.015em;
    --tracking-ui: 0.01em;
  
    /* Spacing (8px-based) */
    --space-1: 0.25rem; /* 4 */
    --space-2: 0.5rem;  /* 8 */
    --space-3: 0.75rem; /* 12 */
    --space-4: 1rem;    /* 16 */
    --space-5: 1.5rem;  /* 24 */
    --space-6: 2rem;    /* 32 */
    --space-7: 3rem;    /* 48 */
    --space-8: 4rem;    /* 64 */
  
    /* Radius */
    --radius-sm: 0.5rem;   /* 8 */
    --radius-md: 0.75rem;  /* 12 */
    --radius-lg: 1rem;     /* 16 */
  
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 10px 20px rgba(0,0,0,0.10);
    --shadow-card: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  
    /* Layout */
    --container-max: 1200px;
    --container-pad: 1.25rem; /* 20px */
  
    /* Transitions */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
  }