/**
 * DESIGN TOKENS
 * 
 * Central definition of all design values used across the Group Finder tool.
 * These tokens are referenced by component-styles.css and should be used
 * in all custom styles to maintain consistency.
 * 
 * DO NOT use hex codes directly in components - always use these CSS variables.
 */

:root {
   /* ============================================
     BRAND & ACCENT COLORS
     ============================================ */

   --scout-red: #E22E12;
   --scout-red-light: #F8CBC4;
   --scout-red-dark: #711709;

   --scout-blue: #006DDF;
   --scout-blue-light: #BFDAF7;
   --scout-blue-dark: #003770;

   --scout-green: #23A950;
   --scout-green-light: #C8E9D3;
   --scout-green-dark: #125528;

   --scout-forest: #205B41;
   --scout-forest-light: #C7D6CF;
   --scout-forest-dark: #102E21;

   --scout-navy: #00397F;
   --scout-navy-light: #BFCDE0;
   --scout-navy-dark: #001D41;

   --scout-purple: #7431DC;
   --scout-purple-light: #DCCBF6;
   --scout-purple-dark: #3A196E;

   --scout-teal: #008486;
   --scout-teal-light: #C1E0E1;
   --scout-teal-dark: #044243;

   --scout-orange: #FF912A;
   --scout-orange-light: #FFE3CA;
   --scout-orange-dark: #FF661E;

   --scout-yellow: #FEE31F;
   --scout-yellow-light: #FFF9BD;
   --scout-yellow-dark: #FDA613;

   --scout-pink: #FDA0DF;
   --scout-pink-light: #FFECF5;
   --scout-pink-dark: #FF5A75;

   --scout-wine: #a125a1;
   --scout-wine-light: #efddf7;
   --scout-wine-dark: #5F1D7F;

  --explorer-night: #00425e;
  --explorer-night-light: #cce0e8;
  --explorer-night-dark: #002635;

  --explorer-sage: #55734b;
  --explorer-sage-light: #dbe3d5;
  --explorer-sage-dark: #2b3a26;

  --explorer-glowworm: #ffffc2;
  --explorer-glowworm-light: #fffde0;
  --explorer-glowworm-dark: #e6e6b8;

  --explorer-citrus: #eeff37;
  --explorer-citrus-light: #f7ffb3;
  --explorer-citrus-dark: #b3cc2b;

  --explorer-secondary-twilight: #1f7099;
  --explorer-secondary-twilight-light: #cce0e8;
  --explorer-secondary-twilight-dark: #002635;

  --explorer-secondary-ember: #ff8833;
  --explorer-secondary-ember-light: #ffe0cc;
  --explorer-secondary-ember-dark: #b3591a;

  --explorer-secondry-lavender: #b5a9f1;
  --explorer-secondary-lavender-light: #e6e0f7;
  --explorer-secondary-lavender-dark: #7f73b3;


   /* ============================================
     NEUTRAL COLORS
     ============================================ */

   --grey: #999999;
   --grey-light: #BBBBBB;
   --grey-lighter: #EEEEEE;
   --grey-dark: #333333;
   --grey-darker: #1A1A1A;

   --white: #FFFFFF;
   --black: #000000;

   /* ============================================
     TYPOGRAPHY
     ============================================ */

   /* Font Families */
   --font-family-titles: 'Nunito Sans', Arial, sans-serif;
   --font-family-titles-squirrels: 'Nunito', Arial, sans-serif;
   --font-family-titles-explorers: 'Gill Sans', Arial, sans-serif;
   --font-family-default: 'Nunito Sans', Arial, sans-serif;
   --font-family-icons: 'Material Symbols Outlined';

   /* Font Sizes - Mobile First */
   --font-size-xs: 11px;
   --font-size-sm: 12px;
   --font-size-base: 14px;
   --font-size-md: 16px;
   --font-size-lg: 18px;
   --font-size-xl: 3vw;
   --font-size-2xl: 4vw;

   /* Font Weights */
   --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
   --font-weight-black: 900;

   /* Line Heights */
   --line-height-tight: 0.85;
   --line-height-normal: 1;
   --line-height-relaxed: 1.25;

   /* ============================================
     SPACING
     Based on 4px grid system
     ============================================ */

    --spacing-xs: 0.25vw;
    --spacing-sm: 0.5vw;
    --spacing-md: 1vw;
    --spacing-lg: 1.5vw;
    --spacing-xl: 2vw;
    --spacing-2xl: 2.5vw;
    --spacing-3xl: 3vw;
    --spacing-4xl: 3.5vw;

   /* ============================================
     LAYOUT
     ============================================ */

   /* Border Radius */
   --border-radius-sm: 0.5vw;
   --border-radius: 1vw;
   --border-radius-lg: 2vw;
   --border-radius-full: 10vw;

   /* Borders */
   --border-width: 1px;
   --border-width-thick: 2px;
   --border-color: var(--grey-light);
   --border-color-dark: var(--grey);

   /* Shadows */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

   /* Z-index layers */
   --z-base: 0;
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-modal: 300;
   --z-tooltip: 400;

   /* ============================================
     TRANSITIONS
     ============================================ */

   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
   --transition-slow: 350ms ease;

   /* ============================================
     ICON SIZES
     Matches sprite sheet sizing
     ============================================ */

   --icon-size-sm: 16px;
   --icon-size-base: 24px;
   --icon-size-lg: 32px;
   --icon-size-xl: 48px;
   --icon-size-button: 100px;

   /* Section logo sizes (responsive) */
   --section-logo-mobile: 40px;
   --section-logo-tablet: 60px;
   --section-logo-desktop: 100px;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   Adjust font sizes at larger breakpoints
   ============================================ */

@media (min-width: 800px) {
   :root {
      --font-size-xs: 1vw;
      --font-size-sm: 1.2vw;
      --font-size-base: 1.4vw;
      --font-size-md: 1.6vw;
      --font-size-lg: 1.8vw;
      --font-size-xl: 2vw;
      --font-size-2xl: 3vw;
      /* --spacing-xs: 8px; */
      /* --spacing-sm: 12px; */
      /* --spacing-md: 16px; */
      /* --spacing-lg: 20px; */
      /* --spacing-xl: 24px; */
      --icon-size-sm: 1.5vw;
      --icon-size-base: 2.2vw;
      --icon-size-lg: 3.2vw;
      --icon-size-xl: 4vw;
      --icon-size-button: 5vw;
   }
}

@media (max-width: 600px) {
   :root {
        --font-size-xs: 1vw;
        --font-size-sm: 12px;
        --font-size-base: 2.5vw;
        --font-size-md: 3vw;
        --font-size-lg: 3.4vw;
        --font-size-xl: 3.6vw;
        --font-size-2xl: 4vw;
        /* --spacing-xs: 4px; */
        --spacing-sm: 1vw;
        --spacing-md: 1.5vw;
        --spacing-lg: 2vw;
        --spacing-xl: 3vw;
        --icon-size-sm: 3.4vw;
        --icon-size-base: 4vw;
        --icon-size-lg: 5vw;
        --icon-size-xl: 7vw;
   }
}

/*@media (max-width: 480px) {
   :root {
      --font-size-xs: 10px;
      --font-size-sm: 11px;
      --font-size-base: 12px;
      --font-size-md: 12px;
      --font-size-lg: 13px;
      --font-size-xl: 14px;
      --font-size-2xl: 4vw;
      --spacing-xs: 4px;
      --spacing-sm: 8px;
      --spacing-md: 10px;
      --spacing-lg: 12px;
      --spacing-xl: 14px;
      --icon-size-sm: 14px;
      --icon-size-base: 18px;
      --icon-size-lg: 24px;
      --icon-size-xl: 32px;
      --icon-size-button: 80px;
   }
}*/

/* Group and section type color tokens - these are used in component styles to apply the correct colors based on group/section type. */

.group-type--group {
  --key-colour: var(--scout-purple);
  --key-colour-dark: var(--scout-purple-dark);
  --key-colour-light: var(--scout-purple-light);
}

.group-type--seaScout {
  --key-colour: var(--scout-navy);
  --key-colour-dark: var(--scout-navy-dark);
  --key-colour-light: var(--scout-navy-light);
}

.group-type--airScout {
  --key-colour: var(--scout-blue);
  --key-colour-dark: var(--scout-blue-dark);
  --key-colour-light: var(--scout-blue-light);
}

.group-type--homeSchool {
  --key-colour: var(--scout-teal);
  --key-colour-dark: var(--scout-teal-dark);
  --key-colour-light: var(--scout-teal-light);
}

.group-type--explorers {
  --key-colour: var(--scout-navy);
  --key-colour-dark: var(--scout-navy-dark);
  --key-colour-light: var(--scout-navy-light);
}

.section-type--, .section-type-- .section-colour {
   --key-colour: var(--grey-dark);
   --key-colour-dark: var(--grey-darker);
   --key-colour-light: var(--grey);
}

.section-type--squirrels, .section-type--squirrels .section-colour {
  --key-colour: var(--scout-red);
  --key-colour-dark: var(--scout-red-dark);
  --key-colour-light: var(--scout-red-light);
}

.section-type--beavers, .section-type--beavers .section-colour {
  --key-colour: var(--scout-blue);
  --key-colour-dark: var(--scout-blue-dark);
  --key-colour-light: var(--scout-blue-light);
}

.section-type--cubs, .section-type--cubs .section-colour {
  --key-colour: var(--scout-green);
  --key-colour-dark: var(--scout-green-dark);
  --key-colour-light: var(--scout-green-light);
}

.section-type--scouts, .section-type--scouts .section-colour {
  --key-colour: var(--scout-forest);
  --key-colour-dark: var(--scout-forest-dark);
  --key-colour-light: var(--scout-forest-light);
}

.section-type--explorers, .section-type--explorers .section-colour {
  --key-colour: var(--scout-navy);
  --key-colour-dark: var(--scout-navy-dark);
  --key-colour-light: var(--scout-navy-light);
}

span.section-colour {
  color: var(--key-colour);
}



/* ============================================
   UTILITY CLASSES
   Common patterns used across components
   ============================================ */

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.sr-only {
   /* Alias for visually-hidden */
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/* Maximum Scaled Sizes */
@media(min-width: 1200px) {
  :root {
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 19px;
    --font-size-lg: 21px;
    --font-size-xl: 24px;
    --font-size-2xl: 3vw;
    --spacing-xs: 8px;
    --spacing-sm: 10px;
    --spacing-md: 12px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --icon-size-sm: 28px;
    --icon-size-base: 32px;
    --icon-size-lg: 38px;
    --icon-size-xl: 48px;
    --icon-size-button: 5vw;
  }
}