/* ==========================================================================
   LUMINA EUROPE - DESIGN TOKENS & BASE STYLES
   Theme: Clean Continental Academic / Institutional
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Color Palette - Continental Academic / Horizon Euro-Tech */
  --color-bg: #F8FAFC;                 /* Soft porcelain canvas */
  --color-bg-subtle: #F1F5F9;          /* Slightly deeper slate tint for alternating sections */
  --color-surface: #FFFFFF;            /* Pure clinical white for cards & documents */
  --color-surface-elevated: #FFFFFF;
  --color-surface-muted: #F8FAFC;

  /* Oxford Navy & EU Cobalt (Dominant Authoritative Identity) */
  --color-navy-950: #061224;           /* Deepest EU midnight */
  --color-navy-900: #0C2340;           /* Oxford Navy / Dominant Heading text */
  --color-navy-800: #132E52;
  --color-cobalt-700: #1D4ED8;         /* EU Flag Blue / Active links */
  --color-cobalt-600: #2563EB;
  --color-cobalt-100: #DBEAFE;
  --color-cobalt-50: #EFF6FF;

  /* Horizon Gold & Amber (European Stars & Prestigious Milestone Accents) */
  --color-gold-600: #D97706;
  --color-gold-500: #F59E0B;           /* Horizon Star Gold */
  --color-gold-400: #FBBF24;
  --color-gold-100: #FEF3C7;
  --color-gold-50: #FFFBEB;

  /* Digital Health Cyan & Teal (Innovation & Living Labs Accents) */
  --color-cyan-700: #0369A1;
  --color-cyan-600: #0284C7;
  --color-cyan-500: #0EA5E9;
  --color-cyan-100: #E0F2FE;
  --color-cyan-50: #F0F9FF;

  /* Neutral Slate Borders & Typography */
  --color-text-main: #0F172A;          /* Slate 900 */
  --color-text-secondary: #334155;     /* Slate 700 */
  --color-text-muted: #64748B;         /* Slate 500 */
  --color-text-light: #94A3B8;         /* Slate 400 */

  --color-border-hairline: #E2E8F0;     /* Slate 200 - Razor sharp precision border */
  --color-border-subtle: #CBD5E1;       /* Slate 300 */
  --color-border-focus: #1D4ED8;

  /* Status Colors */
  --color-success-bg: #ECFDF5;
  --color-success-border: #A7F3D0;
  --color-success-text: #065F46;
  --color-error-bg: #FEF2F2;
  --color-error-border: #FECACA;
  --color-error-text: #991B1B;

  /* Typography Stacks */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Shadows (Paper-like and academic elevation) */
  --shadow-xs: 0 1px 2px rgba(12, 35, 64, 0.04);
  --shadow-sm: 0 1px 3px rgba(12, 35, 64, 0.05), 0 1px 2px rgba(12, 35, 64, 0.03);
  --shadow-md: 0 4px 6px -1px rgba(12, 35, 64, 0.06), 0 2px 4px -2px rgba(12, 35, 64, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(12, 35, 64, 0.07), 0 4px 6px -4px rgba(12, 35, 64, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(12, 35, 64, 0.08), 0 8px 10px -6px rgba(12, 35, 64, 0.03);

  /* Radii & Transitions */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Spacing system */
  --container-max-width: 1240px;
  --container-padding: clamp(1rem, 4vw, 2.5rem);
}

/* Base Reset & Document Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Image & Media defaults */
img, svg, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Accessibility Focus Ring */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

/* Selection */
::selection {
  background-color: var(--color-cobalt-100);
  color: var(--color-navy-950);
}

/* Common Layout Containers */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-narrow {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Typography Helpers */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-navy-900);
  line-height: 1.25;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

.text-gold {
  color: var(--color-gold-600);
}

.text-cobalt {
  color: var(--color-cobalt-700);
}

.text-cyan {
  color: var(--color-cyan-700);
}

.text-muted {
  color: var(--color-text-muted);
}

/* Visually Hidden Helper (for Screen Readers) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Accessible Skip to Content Link */
.skip-to-content {
  position: absolute;
  top: -120px;
  left: 1.5rem;
  z-index: 99999;
  background-color: var(--color-navy-900);
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: 1.25rem;
  outline: 2px solid var(--color-gold-400);
}