/* ======================================================
   WPU / World Players Association — Design Tokens (Plain CSS)
   ====================================================== */
:root {
  /* Fonts */
  --font-heading: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Type scale */
  --nav-link-font-size: 0.80rem;
  --fs-hero: clamp(2.6rem, 5vw + 1rem, 4.5rem);
  --fs-h1:   clamp(2.0rem, 2.4vw + 1rem, 3.0rem);
  --fs-h2:   clamp(1.6rem, 1.4vw + 1rem, 2.2rem);
  --fs-h3:   1.375rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-smaller: 0.600rem;

  --line-height-base: 1.6;
  --text-white: #FFFFFF;

  /* Brand palette */
  --navy-900: #0D0D52;
  --blue-600: #1A2BC2;
  --blue-300: #A3D6FA;
  --navy-900-rgb: 13, 13, 82;
  --overlay: rgba(var(--navy-900-rgb), .75);

  /* Accents */
  --lime-500:   #A1F021;
  --orange-500: #FF591A;
  --violet-400: #B885FF;
  --yellow-500: #EDDE24;
  --red-500:    #FF1C1C;
  --purple-700: #751CFF;
  --gb-gray-1: #f9f9f9;

  /* Institute green */
  --green-600:  #008d91;
  --green-600-rgb: 0, 141, 145;

  --green-700:  color-mix(in hsl, var(--green-600), black 20%);
  --green-500:  color-mix(in hsl, var(--green-600), white 8%);

  /* Neutrals */
  --neutral-0:   #ffffff;
  --neutral-50:  #F6F7FA;
  --neutral-100: #EEF1F5;
  --neutral-300: #D9DEE6;
  --neutral-700: #2F3441;

  /* Semantics */
  --success: #2FA66A;
  --info:    #1CA3EC;
  --warning: #E6B800;
  --danger:  #E23D3D;

  /* Surfaces */
  --surface-page:   var(--neutral-0);
  --surface-hero:   var(--navy-900);
  --surface-subtle: var(--neutral-50);
  --surface-card:   var(--neutral-0);

  --surface-hero-darker: color-mix(in hsl, var(--surface-hero), black 20%);

  /* Text & borders */
  --text-main:   #0E1320;
  --text-muted:  var(--navy-900);
  --border-soft: var(--navy-900);

  /* Spacing (rem) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Radii & elevation */
  --radius-sm:  .5rem;
  --radius:     .75rem;
  --radius-lg:  1.25rem;
  --radius-pill:9999px;
  --shadow-sm:  0 .125rem .25rem rgba(0,0,0,.08);
  --shadow:     0 .25rem  .75rem rgba(0,0,0,.10);
  --shadow-lg:  0 .625rem 1.25rem rgba(0,0,0,.14);

  /* --- Navbar helpers --- */
  --navbar-bg-solid: var(--navy-900);
  --navbar-underline: var(--blue-300);        /* color de la rayita */
  --nav-height: 72px;
  --navbar-bg-transparent: transparent; /*rgba(var(--navy-900-rgb), .45);*/  /* glassy on hero */

  /* Sections */
  --section-pad-y: clamp(3rem, 6vw, 5rem);


}

/* Map tokens → Bootstrap */
:root {
  --bs-nav-link-font-size: var(--nav-link-font-size);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size:   var(--fs-body);
  --bs-body-line-height: var(--line-height-base);

  --bs-body-bg:          var(--surface-page);
  --bs-body-color:       var(--text-main);
  --bs-secondary-color:  var(--text-muted);
  --bs-border-color:     var(--border-soft);

  --bs-primary:          var(--blue-600);
  --bs-link-color:       var(--blue-600);
  --bs-link-hover-color: color-mix(in hsl, var(--blue-600), black 10%);

  --bs-success: var(--success);
  --bs-info:    var(--info);
  --bs-warning: var(--warning);
  --bs-danger:  var(--danger);

  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius:    var(--radius);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-box-shadow:       var(--shadow-sm);
  --bs-box-shadow-lg:    var(--shadow-lg);

  --bs-heading-color:    var(--text-main);

  .btn-primary {
    --bs-btn-bg: var(--navy-900);
    --bs-btn-border-color: var(--navy-900);
    --bs-btn-hover-color: var(--navy-900);

    --bs-btn-hover-bg: var(--blue-300);
    --bs-btn-hover-border-color: var(--blue-300);
  }

}

/* Optional variant for Institute pages */
.theme-institute {
  --bs-primary:        var(--green-700);
  --bs-link-color:     var(--green-600);
  --bs-link-hover-color: var(--green-700);
  --surface-hero:      var(--green-600);
  --surface-page: var(--green-600);
  --navy-900: var(--green-600);
  --overlay: rgba(var(--green-600-rgb), .75);
  --navbar-bg-solid: var(--green-700);
  --navbar-underline:   var(--green-700);
  --surface-hero-darker: color-mix(in hsl, var(--surface-hero), black 20%);

}

/* Typographic helpers */
h1,.h1 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--fs-h1); }
h2,.h2 { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--fs-h2); }
h3,.h3 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--fs-h3); }
.display-1 { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--fs-hero); }
.lead { font-size: 1.125rem; color: var(--bs-secondary-color); }
body { font-family: var(--font-body); }

/* Brand utilities */
.text-brand { color: var(--bs-primary)!important; }
.bg-subtle  { background: var(--surface-subtle); }
.card-rounded { border-radius: var(--radius-lg); box-shadow: var(--shadow); }