/**
 * Global Diaspora Connect (GDC) Design System Tokens
 * Author: Global Diaspora Connect Architecture Team
 * Version: 1.0.0
 * 
 * Precedence Rule: Visual design, layout, colours, component styling derived 
 * strictly from Mockup Sheet 1 with WCAG AA compliance enhancements.
 */

:root {
  /* ==========================================================================
     1. COLOUR PALETTE (Brand, Accents, Semantics & Neutrals)
     ========================================================================== */
  
  /* Primary Deep Navies */
  --gdc-navy-900: #0A1F44; /* Footer, hero overlay base, dominant headings on light */
  --gdc-navy-800: #0B2556; /* Hover state for navy elements */
  --gdc-navy-700: #0B2E6B; /* Primary brand navy, header text, table headers */
  --gdc-navy-600: #103B82; /* Interactive navy accent */
  
  /* Royal & Accent Blues */
  --gdc-blue-600: #1F5FAE; /* "Submit a Project" button, primary links, active badges */
  --gdc-blue-700: #16498A; /* Hover state for blue buttons */
  --gdc-blue-500: #2E76CF; /* Secondary blue accent */
  --gdc-blue-400: #4FA8E8; /* "Exploratory" badge, highlights on dark backgrounds */
  --gdc-blue-100: #E3EFFF; /* Soft blue tint backgrounds */
  --gdc-blue-50:  #F0F6FF; /* Subtle blue surface */

  /* Gold & Warm Accents */
  --gdc-gold-500: #C99A1E; /* Primary CTA ("Join GDC"), icon accents, active underlines */
  --gdc-gold-600: #A87F12; /* Gold hover / active pressed state */
  --gdc-gold-700: #88650A; /* Accessible high-contrast gold text */
  --gdc-gold-100: #F7EBC5; /* Gold tint backgrounds */
  --gdc-gold-50:  #FDFBF3; /* Lightest gold tint surface */

  /* Growth & Success Greens */
  --gdc-green-600: #1B8A34; /* "Member Login" button, "Operational" badge, checklist ticks */
  --gdc-green-700: #146D29; /* Green hover / active pressed */
  --gdc-green-100: #E4F4E8; /* Green tint badge backgrounds */
  --gdc-green-50:  #F2FAF4; /* Subtle green surface */

  /* Warning & Caution Ambers */
  --gdc-amber-500: #D98200; /* WCAG AA calibrated amber (4.5:1 on light) */
  --gdc-amber-600: #B86E00; /* Darker amber for text contrast */
  --gdc-amber-100: #FEF3D6; /* Amber tint badge background */

  /* Status Greys & Neutrals */
  --gdc-grey-500: #6B7280; /* "Concept Stage" badge text (WCAG AA compliant) */
  --gdc-grey-400: #8A94A3; /* Secondary status borders & icons */
  --gdc-grey-200: #D1D5DB; /* Subtle separators */
  --gdc-grey-100: #F3F4F6; /* Grey tint badge background */

  /* Typography Colors */
  --gdc-ink:       #1A2433; /* Primary body text (14.2:1 on white) */
  --gdc-ink-light: #2D3A4E; /* Lead paragraphs & sub-headers */
  --gdc-muted:     #5B6778; /* Secondary text, metadata, captions (5.1:1 on white) */
  --gdc-line:      #E3E9F2; /* Borders, dividers, card outlines */

  /* Surfaces & Canvas */
  --gdc-white:     #FFFFFF; /* Pure page canvas & card surface */
  --gdc-surface:   #F5F8FC; /* Off-white cool surface for alternate sections */
  --gdc-surface-2: #EDF2F8; /* Deeper surface for nested containers */

  /* ==========================================================================
     2. STATUS BADGE TOKENS (Mandatory Taxonomy System)
     ========================================================================== */
  
  /* Status 1: Operational / Active */
  --gdc-status-operational-text:   var(--gdc-green-600);
  --gdc-status-operational-bg:     var(--gdc-green-100);
  --gdc-status-operational-border: #B7E4C0;

  /* Status 2: Verified / Screened */
  --gdc-status-verified-text:      var(--gdc-blue-600);
  --gdc-status-verified-bg:        var(--gdc-blue-100);
  --gdc-status-verified-border:    #BFD8F7;

  /* Status 3: Under Development */
  --gdc-status-dev-text:           var(--gdc-amber-600);
  --gdc-status-dev-bg:             var(--gdc-amber-100);
  --gdc-status-dev-border:         #FCDCA0;

  /* Status 4: Expression of Interest */
  --gdc-status-eoi-text:           var(--gdc-gold-700);
  --gdc-status-eoi-bg:             var(--gdc-gold-100);
  --gdc-status-eoi-border:         #EED48C;

  /* Status 5: Exploratory */
  --gdc-status-exploratory-text:   #0D72B8; /* Calibrated from blue-400 for 4.5:1 AA contrast */
  --gdc-status-exploratory-bg:     #E6F4FD;
  --gdc-status-exploratory-border: #B5E0FB;

  /* Status 6: Concept Stage */
  --gdc-status-concept-text:       var(--gdc-grey-500);
  --gdc-status-concept-bg:         var(--gdc-grey-100);
  --gdc-status-concept-border:     var(--gdc-grey-200);

  /* ==========================================================================
     3. TYPOGRAPHY SCALES & SYSTEM STACKS
     ========================================================================== */
  
  --gdc-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gdc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid Typography (clamp based on 375px mobile to 1440px desktop) */
  --gdc-text-h1: clamp(2.5rem, 4.5vw + 1rem, 3.5rem);       /* 40px -> 56px */
  --gdc-text-h2: clamp(1.75rem, 2.5vw + 0.75rem, 2.25rem);  /* 28px -> 36px */
  --gdc-text-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);     /* 20px -> 24px */
  --gdc-text-h4: clamp(1.125rem, 0.8vw + 0.8rem, 1.25rem);   /* 18px -> 20px */
  --gdc-text-body-lg: 1.125rem;                              /* 18px */
  --gdc-text-body:    1.000rem;                              /* 16px (base) */
  --gdc-text-sm:      0.875rem;                              /* 14px */
  --gdc-text-xs:      0.750rem;                              /* 12px (badges / pills) */

  /* Font Weights */
  --gdc-weight-regular: 400;
  --gdc-weight-medium:  500;
  --gdc-weight-semibold: 600;
  --gdc-weight-bold:    700;

  /* Line Heights */
  --gdc-leading-tight:  1.15;
  --gdc-leading-snug:   1.30;
  --gdc-leading-normal: 1.60;
  --gdc-leading-loose:  1.80;

  /* ==========================================================================
     4. ELEVATION, SHADOWS & RADII
     ========================================================================== */
  
  /* Radii */
  --gdc-radius-sm:   4px;
  --gdc-radius-md:   8px;   /* Standard buttons & inputs */
  --gdc-radius-lg:   12px;  /* Cards, icon containers */
  --gdc-radius-xl:   16px;  /* Prominent cards, feature modules */
  --gdc-radius-pill: 9999px; /* Status badges, pill buttons, avatar rings */

  /* Shadows (Soft corporate elevation) */
  --gdc-shadow-xs:   0 1px 2px rgba(10, 31, 68, 0.05);
  --gdc-shadow-sm:   0 2px 4px rgba(10, 31, 68, 0.06);
  --gdc-shadow-md:   0 4px 12px rgba(10, 31, 68, 0.08);
  --gdc-shadow-lg:   0 10px 24px rgba(10, 31, 68, 0.10);
  --gdc-shadow-hover: 0 14px 30px rgba(10, 31, 68, 0.14);
  --gdc-shadow-focus: 0 0 0 3px rgba(31, 95, 174, 0.35);

  /* Transitions */
  --gdc-transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --gdc-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --gdc-transition-slow:   0.40s cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     5. SPACING & LAYOUT GRID
     ========================================================================== */
  
  --gdc-container-max: 1240px;
  --gdc-container-pad: clamp(1rem, 3vw, 2rem);
  --gdc-section-gap:   clamp(3.5rem, 6vw, 6rem);
}