/* ==========================================================================
   FAMILY TRADE — Design System Tokens
   Color palette inspired by GSTEP.org.gh, Global Youth Mobilization, SDSN Youth
   ========================================================================== */

:root {
  /* ── Primary Palette ── */
  --color-primary:        #0D9488;   /* Teal – trust, education */
  --color-primary-light:  #14B8A6;
  --color-primary-dark:   #0F766E;
  --color-primary-50:     #F0FDFA;
  --color-primary-100:    #CCFBF1;

  /* ── Accent – Warm Orange ── */
  --color-accent:         #F59E0B;   /* Warm amber/orange */
  --color-accent-light:   #FBBF24;
  --color-accent-dark:    #D97706;

  /* ── Secondary – Vibrant Magenta ── */
  --color-secondary:      #EC4899;
  --color-secondary-light:#F472B6;
  --color-secondary-dark: #DB2777;

  /* ── Tertiary – Deep Navy ── */
  --color-navy:           #1E293B;
  --color-navy-light:     #334155;

  /* ── Success / SDG Green ── */
  --color-green:          #22C55E;
  --color-green-light:    #4ADE80;

  /* ── Coral / Energy ── */
  --color-coral:          #F43F5E;

  /* ── Themes / Semantic Colors ── */
  --color-surface:         #FFFFFF;
  --color-bg:              #FAFBFC;
  --color-bg-alt:          #F1F5F9;
  --color-text:            #1E293B;
  --color-text-secondary:  #64748B;
  --color-text-light:      #94A3B8;
  --color-border:          #E2E8F0;
  --color-border-light:    #F1F5F9;
  --color-navbar-bg:       rgba(255, 255, 255, 0.92);
  --shadow-color:          rgba(0, 0, 0, 0.1);
  --color-white:           #FFFFFF; /* Keep as literal if used for absolute white, but I'll use semantic variables mostly */

  /* ── Typography ── */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Outfit', var(--font-primary);

  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.875rem;    /* 14px */
  --text-base:  1rem;        /* 16px */
  --text-lg:    1.125rem;    /* 18px */
  --text-xl:    1.25rem;     /* 20px */
  --text-2xl:   1.5rem;      /* 24px */
  --text-3xl:   1.875rem;    /* 30px */
  --text-4xl:   2.25rem;     /* 36px */
  --text-5xl:   3rem;        /* 48px */
  --text-6xl:   3.75rem;     /* 60px */

  --leading-tight:    1.25;
  --leading-snug:     1.375;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* ── Spacing ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Border Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --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-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px 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);
  --shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-glow:  0 0 40px rgba(13, 148, 136, 0.15);

  /* ── Layout ── */
  --max-width:      1280px;
  --max-width-sm:   640px;
  --max-width-md:   768px;
  --max-width-lg:   1024px;

  /* ── Z-index ── */
  --z-nav:     100;
  --z-modal:   200;
  --z-tooltip: 300;
}

/* ==========================================================================
   DARK MODE OVERRIDES (System Preferred)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface:         #1E293B;   /* Slate 800 */
    --color-bg:              #0F172A;   /* Slate 900 */
    --color-bg-alt:          #1E293B;
    --color-text:            #F8FAFC;   /* Slate 50 */
    --color-text-secondary:  #94A3B8;   /* Slate 400 */
    --color-text-light:      #64748B;
    --color-border:          #334155;
    --color-border-light:    #1E293B;
    --color-navbar-bg:       rgba(15, 23, 42, 0.9);
    --shadow-color:          rgba(0, 0, 0, 0.4);
    
    /* IMPORTANT: --color-white stays #FFFFFF!
       Sections like CTA, Showcase, Footer use literal white text. 
       Use --color-surface for "card backgrounds" instead. */
    
    --color-navy:            #F8FAFC;   /* Titles in dark mode become light */
    --color-navy-light:      #CBD5E1;
    --color-navy-bg:         #020617;   /* Deepest blue for showcase/footer */
    
    /* Primary adjustments for dark mode */
    --color-primary-50:      rgba(13, 148, 136, 0.1);
    --color-primary-100:     rgba(13, 148, 136, 0.2);
    
    /* Icon Backgrounds in Dark Mode (translucent) */
    --color-icon-bg-teal:    rgba(13, 148, 136, 0.15);
    --color-icon-bg-orange:  rgba(245, 158, 11, 0.15);
    --color-icon-bg-pink:    rgba(236, 72, 153, 0.15);
    --color-icon-bg-green:   rgba(34, 197, 94, 0.15);
    --color-icon-bg-blue:    rgba(37, 99, 235, 0.15);
    --color-icon-bg-purple:  rgba(124, 58, 237, 0.15);
    
    /* Roadmap badges */
    --color-roadmap-current-bg:  rgba(245, 158, 11, 0.15);
    --color-roadmap-current-text: #FBBF24;
    --color-roadmap-upcoming-bg:  rgba(148, 163, 184, 0.1);
    --color-roadmap-upcoming-text: #94A3B8;
    
    /* Shadows adjustment */
    --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }
}

/* Also support [data-theme="dark"] for legacy or manual testing if needed, but not required for system-only */
[data-theme="dark"] {
  --color-surface:         #1E293B;
  --color-bg:              #0F172A;
  --color-bg-alt:          #1E293B;
  --color-text:            #F8FAFC;
  --color-text-secondary:  #94A3B8;
  --color-text-light:      #64748B;
  --color-border:          #334155;
  --color-border-light:    #1E293B;
  --color-navbar-bg:       rgba(15, 23, 42, 0.9);
  --shadow-color:          rgba(0, 0, 0, 0.4);
  --color-navy:            #F8FAFC;
  --color-navy-light:      #CBD5E1;
  --color-navy-bg:         #020617;
  --color-primary-50:      rgba(13, 148, 136, 0.1);
  --color-primary-100:     rgba(13, 148, 136, 0.2);
  --color-icon-bg-teal:    rgba(13, 148, 136, 0.15);
  --color-icon-bg-orange:  rgba(245, 158, 11, 0.15);
  --color-icon-bg-pink:    rgba(236, 72, 153, 0.15);
  --color-icon-bg-green:   rgba(34, 197, 94, 0.15);
  --color-icon-bg-blue:    rgba(37, 99, 235, 0.15);
  --color-icon-bg-purple:  rgba(124, 58, 237, 0.15);
  --color-roadmap-current-bg:  rgba(245, 158, 11, 0.15);
  --color-roadmap-current-text: #FBBF24;
  --color-roadmap-upcoming-bg:  rgba(148, 163, 184, 0.1);
  --color-roadmap-upcoming-text: #94A3B8;
  --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.5);
}