/* ===========================================================================
   Portal to the Public — Wisconsin · Design Tokens
   A STEMsaic public-engagement sub-brand. Same brand DNA as STEMsaic
   (navy / blues / gold / Voronoi mosaic, Montserrat + Inter) but warmer,
   bigger, and touch-first for kiosks, museums, festivals, and families.
   Theme-aware. WCAG AA. Deploys as static CSS.
   =========================================================================== */

:root {
  /* --- Brand color (shared STEMsaic palette — strict, no other hues) --- */
  --navy:        #1a2744;
  --blue-medium: #2d5a9e;
  --blue-bright: #4a90d9;
  --gold:        #d4a843;
  --amber:       #c4933f;
  --white:       #ffffff;

  /* Stained-glass tile ramp — Portal leans into more color energy:
     blue tones PLUS warm gold/amber glass for cathedral-window warmth. */
  --tile-navy:   #1a2744;
  --tile-700:    #233763;
  --tile-blue:   #2d5a9e;
  --tile-bright: #4a90d9;
  --tile-gold:   #d4a843;
  --tile-amber:  #c4933f;

  /* --- Semantic (LIGHT venue surface — default) --- */
  --bg:            var(--white);
  --bg-subtle:     #eef3fa;   /* cool blue-tint panel, AA-safe with navy text */
  --surface:       var(--white);
  --text:          var(--navy);
  --text-muted:    #475270;   /* navy-derived, passes AA on white */
  --border:        #d7deea;
  --link:          var(--blue-medium);
  --link-hover:    var(--blue-bright);
  --accent:        var(--gold);
  --accent-hover:  var(--amber);
  --focus-ring:    var(--blue-bright);

  /* --- Type (kiosk-scale: larger than the consulting site) --- */
  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-label:   "Montserrat", system-ui, sans-serif;

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

  /* Type scale (1.28 modular, bumped up for distance reading & touch) */
  --text-display: 5rem;      /* 80 */
  --text-h1:      3.5rem;    /* 56 */
  --text-h2:      2.5rem;    /* 40 */
  --text-h3:      1.875rem;  /* 30 */
  --text-h4:      1.5rem;    /* 24 */
  --text-lg:      1.375rem;  /* 22 */
  --text-base:    1.125rem;  /* 18 — larger base for legibility */
  --text-sm:      1rem;      /* 16 */
  --text-label:   0.875rem;  /* 14 */

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.65;
  --tracking-label: 0.12em;

  /* --- Spacing (4px base, generous) --- */
  --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;     --space-8: 4rem;     --space-9: 6rem;  --space-10: 8rem;

  /* --- Radius (warmer, friendlier than the sharp consulting site) --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Touch targets (kiosk / family) --- */
  --tap-min: 56px;     /* exceeds the 44px AA minimum for shared touchscreens */

  /* --- Elevation --- */
  --shadow-1: 0 2px 6px rgba(26,39,68,0.10);
  --shadow-2: 0 8px 24px rgba(26,39,68,0.12);
  --shadow-3: 0 16px 40px rgba(26,39,68,0.18);

  --container: 1240px;
}

/* --- DARK exhibit / night-mode surface ------------------------------------ */
[data-theme="dark"] {
  --bg:            #14203a;
  --bg-subtle:     #20305a;
  --surface:       #20305a;
  --text:          var(--white);
  --text-muted:    #b3c0db;
  --border:        #324373;
  --link:          var(--blue-bright);
  --link-hover:    var(--gold);
  --focus-ring:    var(--gold);
}

/* ===========================================================================
   Base type
   =========================================================================== */
body { font-family: var(--font-body); color: var(--text); background: var(--bg);
  font-size: var(--text-base); line-height: var(--leading-body); }
h1,h2,h3,h4 { font-family: var(--font-heading); font-weight: var(--weight-bold);
  line-height: var(--leading-tight); letter-spacing: -0.015em; color: var(--text); }
.label { font-family: var(--font-label); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-label); color: var(--blue-medium); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

/* ===========================================================================
   Buttons — big, friendly, touch-first (min height = --tap-min)
   =========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min); font-family: var(--font-heading);
  font-weight: var(--weight-semibold); font-size: var(--text-lg);
  letter-spacing: 0.01em; line-height: 1; padding: 0 var(--space-6);
  border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.btn--primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn--primary:hover { background: var(--amber); border-color: var(--amber); }

.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: var(--white); }

.btn--ondark { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.7); }
.btn--ondark:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }