/* ========================================================================
   Kasi Economic Warriors (KEW)
   Public Website Front-End
   File: assets/css/variables.css


   Purpose:
   Single source of truth for the public website visual system.
   Page-specific styles must consume these tokens rather than inventing
   new brand colours, spacing values, shadows or typography rules.
   ======================================================================== */


:root {
  /* Brand colours - LOCKED */
  --kew-red: #ED1C24;
  --kew-gold: #F3B900;
  --kew-charcoal: #242622;
  --kew-cream: #FCF8EC;
  --kew-paper: #FFFDF6;
  --kew-muted: #6E7068;
  --kew-line: #E4E0D4;


  /* Semantic colour roles */
  --color-page: var(--kew-cream);
  --color-surface: var(--kew-paper);
  --color-text: var(--kew-charcoal);
  --color-text-muted: var(--kew-muted);
  --color-border: var(--kew-line);
  --color-primary: var(--kew-gold);
  --color-primary-text: var(--kew-charcoal);
  --color-secondary: var(--kew-red);
  --color-secondary-text: #FFFFFF;
  --color-accent: var(--kew-red);
  --color-focus: var(--kew-gold);


  /* Brand-derived translucent states */
  --red-soft: rgba(237, 28, 36, 0.08);
  --red-medium: rgba(237, 28, 36, 0.16);
  --gold-soft: rgba(243, 185, 0, 0.12);
  --charcoal-soft: rgba(36, 38, 34, 0.06);
  --charcoal-overlay: rgba(36, 38, 34, 0.72);


  /* Typography */
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: Montserrat, "Segoe UI", Arial, sans-serif;


  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --font-size-4xl: 3.75rem;
  --font-size-hero: clamp(2.75rem, 6vw, 5.25rem);


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


  --line-height-tight: 1.08;
  --line-height-heading: 1.15;
  --line-height-body: 1.65;
  --line-height-loose: 1.8;


  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-eyebrow: 0.16em;


  /* Layout measurements */
  --container-max: 1280px;
  --container-reading: 760px;
  --container-gutter: clamp(20px, 4vw, 48px);


  --header-height: 88px;
  --header-height-mobile: 72px;


  --section-space-sm: clamp(48px, 7vw, 72px);
  --section-space-md: clamp(64px, 9vw, 104px);
  --section-space-lg: clamp(80px, 11vw, 136px);


  /* Spacing scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;


  /* Component measurements */
  --button-height: 48px;
  --button-height-lg: 54px;
  --button-padding-x: 24px;
  --button-padding-x-lg: 30px;


  --input-height: 50px;
  --card-padding: clamp(22px, 3vw, 32px);
  --icon-size-sm: 18px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;


  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;


  /* Borders and shadows */
  --border-width: 1px;
  --border-default: var(--border-width) solid var(--color-border);


  --shadow-sm: 0 8px 24px rgba(36, 38, 34, 0.06);
  --shadow-md: 0 16px 44px rgba(36, 38, 34, 0.08);
  --shadow-lg: 0 24px 64px rgba(36, 38, 34, 0.12);


  /* Motion */
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 360ms ease;


  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 20;
  --z-sticky: 40;
  --z-overlay: 80;
  --z-modal: 100;


  /* Responsive reference points */
  --breakpoint-small-mobile: 480px;
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop-large: 1440px;
}