/* ============================================
   BILSEM-MUN 2026 — Design Tokens
   The Way of Learning · Avatar-inspired aesthetic
   ============================================ */

:root {
  /* ---- Palette (sampled from mockups) ---- */
  --color-header-bg: #0b1f2b;
  --color-deep-ocean: #010f16;
  --color-deep-ocean-2: #01111c;
  --color-footer-bg: #06151f;
  --color-footer-panel: #1d1e21;

  --color-ocean-light: #096bb3;
  --color-ocean-mid: #25505f;
  --color-ocean-dark: #103951;
  --color-ocean-deeper: #164258;

  --color-cyan-bright: #5BBED3;
  --color-cyan-soft: #7FE5DB;
  --color-cyan-glow: #56b1b9;
  --color-teal-box: #1e7391;

  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.85);
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-dim: rgba(255, 255, 255, 0.45);

  --color-border-subtle: rgba(255, 255, 255, 0.12);
  --color-border-accent: rgba(86, 177, 185, 0.4);

  /* ---- Typography ---- */
  --font-display: 'Cinzel', 'Trajan Pro', serif;          /* Headings, big titles */
  --font-serif: 'Cormorant Garamond', 'Garamond', serif;  /* Section headers, refined text */
  --font-body: 'Lato', system-ui, -apple-system, sans-serif; /* Body text */
  --font-nav: 'Cinzel', serif;                              /* Navigation */

  /* ---- Type Scale ---- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  2rem;      /* 32 */
  --text-3xl:  2.5rem;    /* 40 */
  --text-4xl:  3.5rem;    /* 56 */
  --text-5xl:  5rem;      /* 80 */

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;

  /* ---- Layout ---- */
  --container-max: 1400px;
  --container-text: 800px;
  --header-h: 72px;

  /* ---- Effects ---- */
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 32px rgba(86, 177, 185, 0.2);
  --blur-glass: blur(12px);

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 200ms var(--ease-out);
  --transition-base: 400ms var(--ease-out);
  --transition-slow: 700ms var(--ease-out);

  /* ---- Z-Index Scale ---- */
  --z-base: 1;
  --z-content: 10;
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 500;
}