:root{
  /* Brand Colors (Charte UlixesLMS) */
  --ulx-gamboge: #F0A202;
  --ulx-baby-powder: #FCFFF7;
  --ulx-sunglow: #FFC73B;
  --ulx-mint-green: #C2EFEB;
  --ulx-moonstone: #50A3AE;
  --ulx-midnight-green: #00535B;
  --ulx-gunmetal: #012B38;

  /* Typography */
  --font-heading: "Anton", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Layout */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(1,43,56,0.10);
  --border: rgba(1,43,56,0.12);

  /* Default theme (fallback): light */
  --bg: var(--ulx-baby-powder);
  --surface: #FFFFFF;
  --text: var(--ulx-gunmetal);
  --heading: var(--ulx-gunmetal);
  --muted: rgba(1,43,56,0.65);
  --muted-2: rgba(1,43,56,0.82);

  --link: var(--ulx-moonstone);

  --cta: var(--ulx-gamboge);
  --cta-hover: var(--ulx-sunglow);
}

/* Light theme */
:root[data-theme="light"]{
  --bg: var(--ulx-baby-powder);
  --surface: #FFFFFF;
  --text: var(--ulx-gunmetal);
  --heading: var(--ulx-gunmetal);
  --muted: rgba(1,43,56,0.65);
  --muted-2: rgba(1,43,56,0.82);

  --link: var(--ulx-moonstone);

  --cta: var(--ulx-gamboge);
  --cta-hover: var(--ulx-sunglow);

  --border: rgba(1,43,56,0.12);
  --shadow: 0 10px 30px rgba(1,43,56,0.10);
}

/* Dark theme (mapped to brand colors) */
:root[data-theme="dark"]{
  --bg: #071B22;               /* deep blue-green */
  --surface: #0B2630;          /* card surface */
  --text: #FCFFF7;             /* Baby Powder as text */
  --heading: #FCFFF7;
  --muted: rgba(252,255,247,0.70);
  --muted-2: rgba(252,255,247,0.85);

  --link: var(--ulx-mint-green);

  --cta: var(--ulx-sunglow);
  --cta-hover: var(--ulx-gamboge);

  --border: rgba(252,255,247,0.14);
  --shadow: 0 12px 40px rgba(0,0,0,0.45);
}

/* Global base */
html, body { height: 100%; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
}

/* Headings hierarchy (Charte: ANTON + LATO weights) */
h1{ font-family: var(--font-heading); letter-spacing: 0.3px; }
h2, h3, h4{ font-family: var(--font-body); }
h2{ font-weight: 900; } /* Lato Black */
h3{ font-weight: 700; } /* Lato Bold */
h4{ font-weight: 400; } /* Lato Regular */

/* Links */
a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Buttons (generic) */
.btn, button, input[type="submit"]{
  background: var(--cta);
  color: #0B1F27;
  border: 0;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.btn:hover, button:hover, input[type="submit"]:hover{
  background: var(--cta-hover);
}