/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — IHub FY26 BlackNeon System
   Source: design_handoff_ihub/README.md
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─── COLORS ─────────────────────────────────────────────────── */

  /* Primary */
  --c-midnight:   #02002D;   /* Main dark background */
  --c-blue:       #086EFD;   /* Blue Ribbon — primary CTA, links, active states */
  --c-blue-alt:   #0D71FC;   /* Slightly lighter blue for gradients */
  --c-black:      #000000;

  /* Accent */
  --c-fuchsia:    #EB17D4;   /* Card hover glow, gradient stops */
  --c-violet:     #7A62E4;   /* Ultramarine Violet — secondary accent, gradients */
  --c-malibu:     #77CDFE;   /* Malibu — eyebrows, active labels, links */

  /* Surface / Background layers */
  --c-near-black: #010010;   /* Newsroom, deep section backgrounds */
  --c-dark1:      #01000F;   /* Deepest card background */
  --c-dark2:      #0B0E1A;   /* Mid dark surface */
  --c-dark3:      #0C1E35;   /* Lighter dark surface */
  --c-dark4:      #151D26;   /* Card gradient mid-stop */

  /* Text */
  --c-white:      #FFFFFF;
  --c-gray-text:  #848891;   /* Secondary text, labels */
  --c-gray-mid:   #757575;   /* Dividers, muted text */
  --c-text-dark:  #171717;   /* Text on light backgrounds */

  /* ─── TYPOGRAPHY ─────────────────────────────────────────────── */

  --font-head:  'Poppins', sans-serif;
  --font-body:  Arial, Helvetica, sans-serif;

  /* ─── SPACING & LAYOUT ───────────────────────────────────────── */

  --max-w:              1440px;
  --gutter:             120px;
  --gutter-tablet:      48px;
  --gutter-mobile:      20px;
  --nav-h:              72px;
  --section-pad:        50px;
  --section-pad-mobile: 60px;
  --card-gap:           24px;
  --grid-gap:           20px;  /* news / team grids */

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */

  --r-card:   2px;    /* cards, inputs — intentional industrial precision */
  --r-btn:    100px;  /* buttons — full pill per spec */
  --r-pill:   20px;   /* stage badges, filter pills */
  --r-avatar: 50%;    /* profile photos */

  /* ─── SHADOWS ────────────────────────────────────────────────── */

  --shadow-card-hover:   0 20px 60px rgba(0, 0, 0, 0.4);
  --shadow-card-glow:    0 0 40px rgba(119, 205, 254, 0.06);
  --shadow-btn-hover:    0 8px 32px rgba(8, 110, 253, 0.35);
  --shadow-card-deep:    0 24px 60px rgba(0, 0, 0, 0.5);

  /* ─── TRANSITIONS ────────────────────────────────────────────── */

  --ease:     cubic-bezier(.25, .46, .45, .94);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 400ms;

  /* ─── GRADIENTS — PAGE BACKGROUNDS ──────────────────────────── */

  --grad-hero-home:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(122, 98, 228, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(8, 110, 253, 0.12) 0%, transparent 60%),
    linear-gradient(175deg, #010010 0%, #02002D 40%, #050030 70%, #0A0520 100%);

  --grad-hero-portfolio:
    radial-gradient(ellipse 80% 60% at 40% 60%, rgba(122, 98, 228, 0.15) 0%, transparent 65%),
    linear-gradient(175deg, #010010 0%, #01001A 50%, #010010 100%);

  --grad-hero-build:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(235, 23, 212, 0.1) 0%, transparent 70%),
    linear-gradient(175deg, #010010 0%, #01001A 60%, #010010 100%);

  --grad-hero-dims:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(122, 98, 228, 0.15) 0%, transparent 65%),
    linear-gradient(175deg, #010010 0%, #02002D 100%);

  --grad-dims-login:
    linear-gradient(11.07deg,
      rgb(122, 98, 228)  8.43%,
      rgb(2, 0, 45)     32.83%,
      #000               63.48%,
      #000               94.57%,
      rgb(10, 136, 255) 122.77%);

  --grad-hero-about:
    radial-gradient(ellipse 80% 70% at 30% 40%, rgba(8, 110, 253, 0.15) 0%, transparent 65%),
    linear-gradient(175deg, #010010 0%, #010010 100%);

  --grad-discovery:
    linear-gradient(180deg, #010010 0%, #02002D 40%, #050030 100%);

  --grad-audience:
    linear-gradient(180deg, #050030 0%, #02002D 100%);

  --grad-team:
    linear-gradient(180deg, #010010 0%, #02002D 100%);

  --grad-contact:
    linear-gradient(180deg, #050030 0%, #02002D 100%);

  /* ─── GRADIENTS — CARDS ──────────────────────────────────────── */

  --grad-card-default:
    radial-gradient(ellipse at top left, rgba(122, 98, 228, 0.12) 0%, transparent 60%),
    linear-gradient(160deg, #01000F 0%, #0D1626 60%, #0C1E35 100%);

  --grad-card-hover-diagonal:
    linear-gradient(160deg, #000000 0%, #0A88FF 83%);

  --grad-card-bottom-line:
    linear-gradient(90deg, transparent, #086EFD, transparent);

  --grad-step-node-primary:
    linear-gradient(135deg, #086EFD, #7A62E4);

  --grad-step-node-secondary:
    linear-gradient(135deg, #7A62E4, #EB17D4);

  --grad-step-line:
    linear-gradient(180deg, #086EFD, #7A62E4, transparent);

  --grad-btn-primary:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #005794 0%, #004D83 100%);

  --grad-btn-primary-hover:
    linear-gradient(160deg, #003D6B 0%, #002F55 100%);

  --grad-btn-secondary:
    linear-gradient(135deg, #091522 0%, #050B11 100%);
}