/* Design tokens */
:root {
  /* ---------- Palette (edit these) ---------- */
  --primary:          #4EC3CF;
  --primary-dark:     #2FB0B8;
  --primary-light:    #7FE3E8;
  --primary-rgb:      78, 195, 207;
  --primary-dark-rgb: 47, 176, 184;

  /* gold and navy accents (key dates timeline) */
  --gold:        #C9A43F;
  --gold-deep:   #A8801F;
  --poster-navy: #143A76;

  /* the congress poster, used by the banner */
  --poster-blue:  #0B6CEB;
  --poster-cyan:  #B5F1FF;
  --poster-coral: #FF5A63;

  --dark:    #0f1923;
  --dark-2:  #1a2636;
  --dark-3:  #243347;

  --white:    #ffffff;
  --gray-50:  #F7F8FA;
  --gray-100: #EDEEF2;
  --gray-200: #D8DAE3;
  --gray-300: #B8BCCA;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* ---------- Roles used by style.css ----------
     The cyan is too light for text on white (about 2:1) and for white text on top of it,
     so headings, text and dark surfaces use the navy ("ink"), and cyan is used for buttons
     (with dark text), highlights, icons and anything on a dark background. */
  --ink: var(--dark);
  --ink-hover: var(--dark-2);
  --ink-active: var(--dark-3);
  --on-primary: var(--dark);          /* text on cyan */
  --primary-ink: #177b84;             /* darker shade of the cyan for small text on white (5:1) */

  --secondary: var(--primary);
  --secondary-hover: var(--primary-dark);
  --secondary-text: var(--primary-ink);
  --secondary-light: var(--primary);   /* cyan on dark backgrounds */
  --accent: var(--primary);
  --accent-hover: var(--primary-light);
  --accent-deep: var(--primary-dark);
  --accent-soft: rgba(var(--primary-rgb), .14);
  --accent-light: var(--primary-light);

  /* surfaces */
  --page-bg: var(--gray-50);
  --nav-bg: var(--white);
  --nav-border: var(--gray-200);
  --info-bg: var(--gray-100);
  --speakers-bg: var(--dark);
  --card-bg: var(--white);
  --card-border: var(--gray-100);
  --divider: var(--gray-100);

  /* text */
  --text: var(--gray-900);
  --text-body: var(--gray-700);
  --text-muted: var(--gray-600);
  --text-soft: var(--gray-600);
  --hero-title: var(--white);

  /* footer */
  --footer-top: var(--dark-2);
  --footer-bottom: var(--dark);
  --footer-bar: var(--dark);
  --footer-text: var(--gray-200);
  --footer-muted: var(--gray-300);

  /* gradients */
  --grad-brand: linear-gradient(90deg, var(--primary-dark), var(--primary-light));
  --grad-brand-diag: linear-gradient(135deg, var(--dark) 0%, var(--dark-3) 100%);
  --grad-footer: linear-gradient(var(--footer-top), var(--footer-bottom));
  --grad-pdf: linear-gradient(90deg, var(--primary-dark), var(--primary-light));

  /* type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui: var(--font-body);
  --font-poster: "Montserrat", var(--font-body);         /* banner lettering, as on the poster */
  --font-script: "Kalam", "Segoe Print", cursive;          /* banner motto */

  /* shape & depth */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --shadow-soft: 0 10px 30px rgba(15, 25, 35, .06);
  --shadow-card: 0 12px 28px rgba(15, 25, 35, .08);
  --shadow-hover: 0 18px 40px rgba(15, 25, 35, .14);
  --shadow-brand: 0 20px 44px rgba(15, 25, 35, .2);

  /* motifs */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='10' viewBox='0 0 64 10'%3E%3Cpath d='M1.5 5c5-5 10-5 15 0s10 5 15 0 10-5 15 0 10 5 15 0' fill='none' stroke='%232FB0B8' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='10' viewBox='0 0 64 10'%3E%3Cpath d='M1.5 5c5-5 10-5 15 0s10 5 15 0 10-5 15 0 10 5 15 0' fill='none' stroke='%234EC3CF' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* motion & layout */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --nav-h: 76px;
}