/* ============================================================
   Leren met Impact — Design System
   colors_and_type.css
   Base + semantic CSS custom properties
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Stardos+Stencil:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ------------------------------------------------------------
   COLOR TOKENS — Base palette
   ------------------------------------------------------------ */
:root {
  /* Navy — primary brand color */
  --lmi-navy-900: #0F1E3D;
  --lmi-navy-800: #152745;
  --lmi-navy-700: #1D3461;
  --lmi-navy-600: #234080;
  --lmi-navy-500: #2A4A8A;
  --lmi-navy-400: #4A6BAA;
  --lmi-navy-300: #7A9ACA;
  --lmi-navy-200: #B0C4E2;
  --lmi-navy-100: #DDE7F4;
  --lmi-navy-50:  #F0F4FB;

  /* Red — accent brand color */
  --lmi-red-900: #7A0A0E;
  --lmi-red-800: #A01418;
  --lmi-red-700: #C8202A;
  --lmi-red-600: #D93038;
  --lmi-red-500: #E8464E;
  --lmi-red-400: #F07075;
  --lmi-red-300: #F8A0A4;
  --lmi-red-200: #FBCBCC;
  --lmi-red-100: #FDE8E9;
  --lmi-red-50:  #FFF4F4;

  /* Teal — secondary, text-on-light */
  --lmi-teal-900: #0A1E28;
  --lmi-teal-800: #112B38;
  --lmi-teal-700: #1A3D4F;
  --lmi-teal-600: #244F66;
  --lmi-teal-500: #2F6480;
  --lmi-teal-400: #4F849A;
  --lmi-teal-300: #7AAABB;
  --lmi-teal-200: #AACBD7;
  --lmi-teal-100: #D5E8EF;
  --lmi-teal-50:  #EEF6F9;

  /* Neutrals / Grays */
  --lmi-gray-900: #111827;
  --lmi-gray-800: #1F2937;
  --lmi-gray-700: #374151;
  --lmi-gray-600: #4A5568;
  --lmi-gray-500: #6B7280;
  --lmi-gray-400: #9AA3B2;
  --lmi-gray-300: #C9CDD6;
  --lmi-gray-200: #E2E4E9;
  --lmi-gray-100: #F4F5F7;
  --lmi-gray-50:  #F9FAFB;
  --lmi-white:    #FFFFFF;

  /* ------------------------------------------------------------
     COLOR TOKENS — Semantic roles
     ------------------------------------------------------------ */

  /* Foreground */
  --fg1:           var(--lmi-teal-700);   /* Primary body text */
  --fg2:           var(--lmi-gray-600);   /* Secondary / muted text */
  --fg3:           var(--lmi-gray-400);   /* Placeholder / disabled */
  --fg-inverse:    var(--lmi-white);      /* Text on dark bg */
  --fg-accent:     var(--lmi-red-700);    /* Accent / link text */

  /* Backgrounds */
  --bg-page:       var(--lmi-gray-50);    /* Page background */
  --bg-surface:    var(--lmi-white);      /* Card / panel background */
  --bg-subtle:     var(--lmi-gray-100);   /* Subtle section fill */
  --bg-primary:    var(--lmi-navy-700);   /* Primary dark background */
  --bg-accent:     var(--lmi-red-700);    /* Accent CTA background */

  /* Borders */
  --border-default:  var(--lmi-gray-200);
  --border-strong:   var(--lmi-gray-300);
  --border-focus:    var(--lmi-navy-500);
  --border-error:    var(--lmi-red-700);

  /* Interactive states */
  --color-primary:        var(--lmi-navy-700);
  --color-primary-hover:  var(--lmi-navy-500);
  --color-primary-press:  var(--lmi-navy-900);
  --color-accent:         var(--lmi-red-700);
  --color-accent-hover:   var(--lmi-red-500);
  --color-accent-press:   var(--lmi-red-900);

  /* Feedback */
  --color-success:  #1A7A4A;
  --color-warning:  #B45309;
  --color-error:    var(--lmi-red-700);
  --color-info:     var(--lmi-navy-500);
  --bg-success:     #ECFDF5;
  --bg-warning:     #FFFBEB;
  --bg-error:       var(--lmi-red-50);
  --bg-info:        var(--lmi-navy-50);

  /* ------------------------------------------------------------
     TYPOGRAPHY TOKENS
     ------------------------------------------------------------ */

  /* Font families */
  --font-display:  'Stardos Stencil', serif;      /* Wordmark only */
  --font-heading:  'Plus Jakarta Sans', sans-serif;
  --font-body:     'Plus Jakarta Sans', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* Font sizes (type scale) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ------------------------------------------------------------
     SEMANTIC TYPE ROLES
     ------------------------------------------------------------ */

  /* Spacing scale (8px grid) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Corner radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-soft:   0 2px 8px rgba(29, 52, 97, 0.08);
  --shadow-medium: 0 4px 16px rgba(29, 52, 97, 0.14);
  --shadow-strong: 0 8px 32px rgba(29, 52, 97, 0.20);
  --shadow-inner:  inset 0 2px 4px rgba(29, 52, 97, 0.06);
}

/* ------------------------------------------------------------
   SEMANTIC TYPE ELEMENTS
   ------------------------------------------------------------ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg1);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg1);
}

h5, .h5 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg1);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg1);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--fg2);
}

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg2);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--lmi-teal-700);
}

/* Display / hero text */
.display {
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: var(--weight-extrabold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

/* Wordmark style */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}