/* Growth by AI - CSS Variables */
/* Based on actual brand specifications from build brief */

:root {
  /* Warm Charcoal + Soft Stone Palette */
  --background-white: #FAFAF8;      /* Warm off-white/stone */
  --background-light: #F5F5F2;      /* Subtle tonal shift */
  --text-dark: #2B2B28;             /* Deep warm charcoal (headings) */
  --text-gray: #52524E;             /* Medium warm charcoal (body) */
  --text-light: #6B6B66;            /* Lighter warm grey (secondary) */

  /* Brand Colors - Muted, warm, discreet */
  --primary: #2B2B28;               /* Dark charcoal for primary CTAs */
  --primary-hover: #1A1A18;         /* Soft black on hover */
  --primary-light: #F5F5F2;         /* Subtle background tint */

  /* Secondary Colors */
  --secondary: #52524E;
  --secondary-hover: #3A3A37;

  /* Accent Colors */
  --accent-color: #7A8F7A;          /* Sage green - doctrinal markers, accents */
  --accent-light: #9CAC9C;          /* Lighter sage for hover states */
  --accent-dark: #5A6F5A;           /* Darker sage for depth */

  /* Warm accents */
  --warm-gray: #8B8B86;
  --border-light: #E8E8E5;          /* Hairline borders */
  --border-medium: #D6D6D2;

  /* Typography Scale */
  --h1-size: 3rem;           /* 48px */
  --h1-line-height: 1.2;
  --h2-size: 2.25rem;        /* 36px */
  --h2-line-height: 1.3;
  --h3-size: 1.5rem;         /* 24px */
  --h3-line-height: 1.4;
  --body-size: 1.125rem;     /* 18px */
  --body-line-height: 1.7;
  --small-size: 0.9375rem;   /* 15px */
  --small-line-height: 1.6;

  /* Spacing Scale - 8px-based system */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 6rem;    /* 96px */

  /* Container Widths */
  --container-max: 1200px;
  --narrow-container-max: 800px;

  /* Font Stack */
  --font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows - Soft and minimal */
  --shadow-sm: 0 1px 2px rgba(43, 43, 40, 0.06);
  --shadow-md: 0 2px 4px rgba(43, 43, 40, 0.08);
  --shadow-lg: 0 4px 8px rgba(43, 43, 40, 0.1);
  --shadow-xl: 0 8px 16px rgba(43, 43, 40, 0.12);
}

/* Responsive Typography */
@media (max-width: 768px) {
  :root {
    --h1-size: 2rem;          /* 32px on mobile */
    --h2-size: 1.75rem;       /* 28px on mobile */
    --h3-size: 1.25rem;       /* 20px on mobile */
    --body-size: 1rem;        /* 16px on mobile */
  }
}

@media (max-width: 480px) {
  :root {
    --h1-size: 1.75rem;       /* 28px on small mobile */
    --h2-size: 1.5rem;        /* 24px on small mobile */
  }
}