/* ==========================================================================
   The HIVE — Deep Tech Ventures Club
   Brand tokens. Light-first: the site reads clean and credible, with the
   club's blue used as accent and for a small number of high-impact bands.
   Colors sampled directly from the club's logo and social assets.
   Change values here; never hardcode a color in a component.
   ========================================================================== */

:root {
  /* --- Raw palette ------------------------------------------------------- */
  --hive-navy:        #000F2D;
  --hive-navy-soft:   #001236;
  --hive-blue:        #0040AA;
  --hive-blue-bright: #0044BB;
  --hive-electric:    #1160F9;
  --hive-white:       #FFFFFF;

  /* Neutral ramp — cool-tinted so it sits with the blues */
  --gray-50:  #F6F8FC;
  --gray-100: #EDF1F8;
  --gray-200: #DDE4F0;
  --gray-400: #8894AC;
  --gray-600: #5A6580;

  /* --- Semantic roles (use these in components) --------------------------- */
  --bg:             var(--hive-white);
  --bg-raised:      var(--gray-50);
  --bg-sunken:      var(--gray-100);
  --text:           var(--hive-navy);
  --text-muted:     var(--gray-600);
  --text-subtle:    var(--gray-400);
  --accent:         var(--hive-electric);
  --accent-deep:    var(--hive-blue);
  --border:         var(--gray-200);
  --border-strong:  #C3CDDF;
  --on-accent:      var(--hive-white);

  /* --- Type --------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.93rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.12rem);
  --step-1:  clamp(1.22rem, 1.1rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
  --step-4:  clamp(2.6rem, 1.6rem + 4.2vw, 4.6rem);

  /* --- Space & shape ------------------------------------------------------ */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.75rem;
  --space-l:   3.25rem;
  --space-xl:  5.5rem;
  --space-2xl: 8rem;

  --radius-s:  8px;
  --radius:    14px;
  --radius-lg: 22px;
  --max-width: 1180px;
  --measure:   62ch;

  --shadow-s: 0 1px 2px rgba(0, 15, 45, 0.06), 0 2px 8px rgba(0, 15, 45, 0.04);
  --shadow-m: 0 4px 12px rgba(0, 15, 45, 0.07), 0 12px 32px rgba(0, 15, 45, 0.07);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Inverted context. Put .on-dark on any <section> and every component inside
   it adapts — no component needs its own dark variant.
   -------------------------------------------------------------------------- */
.on-dark {
  --bg:            var(--hive-navy);
  --bg-raised:     rgba(255, 255, 255, 0.06);
  --bg-sunken:     rgba(0, 0, 0, 0.25);
  --text:          var(--hive-white);
  --text-muted:    rgba(255, 255, 255, 0.74);
  --text-subtle:   rgba(255, 255, 255, 0.52);
  --accent:        #4D8BFF;
  --border:        rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.32);
}

/* Blue band — used sparingly, for moments that should carry the brand. */
.on-blue {
  --bg:            var(--hive-blue);
  --bg-raised:     rgba(255, 255, 255, 0.1);
  --bg-sunken:     rgba(0, 15, 45, 0.28);
  --text:          var(--hive-white);
  --text-muted:    rgba(255, 255, 255, 0.8);
  --text-subtle:   rgba(255, 255, 255, 0.58);
  --accent:        var(--hive-white);
  --border:        rgba(255, 255, 255, 0.22);
  --border-strong: rgba(255, 255, 255, 0.4);
  --on-accent:     var(--hive-blue);
}