/* variables.css or style.css */
:root {
/* === Brand Colors === */
--color-brand-primary: #001e53;      /* Used for background and primary brand */
--color-brand-secondary: #f1ae22;    /* Used for top titles and secondary brand */
--color-brand-accent: #feca16;       /* Used for primary buttons */

/* === Text Colors === */
--color-text-white: #ffffff;       /* Main text, titles, subtitles */
--color-text-muted: #bbbbbb;       /* Muted/secondary text */
--color-text-black: #000000;
--color-text-p: #001e53; 
--color-text-s: #f1ae22; 
--color-text-a: #feca16;


  /* === Font Families === */
  --font-heading: 'Merriweather', serif;
  --font-subheading: 'Lora', serif;
  --font-body: 'Open Sans', sans-serif;

  /* === Font Sizes === */
  --font-size-title: 2.5rem;       /* Main blog title */
  --font-size-subtitle: 1.75rem;   /* Subtitle */
  --font-size-body: 1rem;          /* Main content */
  --font-size-small: 0.875rem;     /* Metadata, captions */
  --font-size-extra-a: clamp(1.9375rem, 3.9vw, 3.0625rem); /*For Large stelying*/


  /* === Font Weights === */
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-light: 300;

  /* === Spacing === */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* === Borders & Radius === */
  --border-radius: 0.5rem;

  /* === Shadow === */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);


/* === Custom Responsive Spacing === */
--section-padding: clamp(3.75rem, 7.82vw, 4.25rem) 1rem;  /* Vertical padding for sections */

/* === Custom Responsive Font Sizes === */
--font-size-a: clamp(0.8125rem, 1.6vw, 1rem);           /* Font size for small header toppers or labels */
--font-size-h: clamp(1.9375rem, 3.9vw, 3.0625rem);      /* Main header font size */
--font-size-b: 1rem;                                       /* Base body font size */

/*custom colors */
  --text-color-b: #4e4b66;

}