/**
 * ASEAN–Hong Kong Collective Mark Initiative
 * Design Tokens & CSS Custom Properties
 * Project: AHKFTA/2026-48
 */

:root {
  /* Brand Color Palette (60-25-15 Rule) */
  --color-cream: #F8F3E8;        /* 60% Canvas & Reading Surface */
  --color-forest: #183C2E;       /* 25% Brand Structural Anchor */
  --color-harvest: #D4A24C;      /* 15% Gold Accent & Mark */
  --color-terracotta: #B85C38;   /* 15% Warm Heritage Accent */
  --color-navy: #1F4B8F;         /* 15% Institutional Accent */
  --color-sage: #A9C2A8;         /* Subtle Borders & Accents */
  --color-charcoal: #2B2B2B;     /* Primary High-contrast Body Text */
  --color-warmwhite: #FFFFFF;    /* Surface Cards & Floating Modals */

  /* Typography Families */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Standard 5-Tier Typography Scale (Eliminating Sub-pixel Sprawl) */
  --text-hero: 3rem;           /* 48px - Primary Hero Title (Playfair Display) */
  --text-h2: 2rem;             /* 32px - Section Headers (Playfair Display) */
  --text-h3: 1.25rem;          /* 20px - Card & Modal Titles (Playfair Display) */
  --text-body: 1rem;           /* 16px - Standard Paragraph Body (Open Sans) */
  --text-sm: 0.875rem;         /* 14px - Compact Body & Secondary Info (Open Sans) */
  --text-caption: 0.75rem;     /* 12px - Minimum Legible Floor: Badges, Chips, Labels (Open Sans) */

  /* Transitions & Shadows */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Unified Grid Gutter Tokens (3-Tier Spacing Scale) */
  --grid-gap-macro: 2rem;      /* 32px (mobile/tablet) to 48px (desktop: 3rem) */
  --grid-gap-card: 1.5rem;     /* 24px (mobile/tablet) to 32px (desktop: 2rem) */
  --grid-gap-micro: 1rem;      /* 16px */
}