/* ============================================================
   HSNR — Hochschule Niederrhein
   Design tokens: colors, typography, spacing, layout
   Source: intern.hs-niederrhein.de/corporate-design/
   ============================================================ */

:root {
  /* -----------------------------------------------------------
     COLORS — Hausfarben (from official corporate design)
     The brand uses only two colors plus white as core surfaces.
     Print = CMYK, Screen = RGB. Values below are screen (RGB).
     ----------------------------------------------------------- */

  /* Primary: Dunkelblau */
  --hsnr-blue:           #305088;
  --hsnr-blue-90:        #45638f;
  --hsnr-blue-70:        #6e83a8;
  --hsnr-blue-50:        #9aaac3;
  --hsnr-blue-30:        #c1cad9;
  --hsnr-blue-10:        #e7ebf1;
  --hsnr-blue-05:        #f1f4f8;        /* very light "Pflichtfeld" tint */

  /* Secondary: Cyan */
  --hsnr-cyan:           #5098d0;
  --hsnr-cyan-70:        #82b3dc;
  --hsnr-cyan-30:        #ccdef0;
  --hsnr-cyan-10:        #ebf3fa;

  /* Neutrals (the system uses these conservatively) */
  --hsnr-white:          #ffffff;
  --hsnr-black:          #000000;
  --hsnr-ink:            #202020;        /* body text default */
  --hsnr-ink-soft:       #4a4a4a;        /* secondary body */
  --hsnr-line:           #d8d8d8;        /* dividers / hairlines */
  --hsnr-surface-alt:    #f5f5f5;        /* page alt background */

  /* Semantic — derived (not in official CD, but consistent) */
  --hsnr-success:        #4a8d3a;
  --hsnr-warning:        #d99b1f;
  --hsnr-danger:         #c1392b;

  /* Foreground/Background semantic tokens */
  --fg-1:                var(--hsnr-ink);
  --fg-2:                var(--hsnr-ink-soft);
  --fg-accent:           var(--hsnr-blue);
  --fg-accent-2:         var(--hsnr-cyan);
  --fg-onblue:           var(--hsnr-white);

  --bg-1:                var(--hsnr-white);
  --bg-2:                var(--hsnr-blue-05);
  --bg-3:                var(--hsnr-surface-alt);
  --bg-blue:             var(--hsnr-blue);
  --bg-cyan:             var(--hsnr-cyan);

  --border:              var(--hsnr-line);
  --border-blue:         var(--hsnr-blue);

  /* -----------------------------------------------------------
     TYPOGRAPHY
     Hausschrift: Helvetica Neue LT (Linotype).
     Tech fallback: Arial. Web-safe stack below mirrors the rule.
     ----------------------------------------------------------- */
  --font-sans:
    "Helvetica Neue", "HelveticaNeue", Helvetica,
    Arial, "Liberation Sans", system-ui, sans-serif;

  /* Headlines per CD: Helvetica Neue LT Bold. Subheads: Medium/Roman in Cyan. */
  --font-display:        var(--font-sans);
  --font-body:           var(--font-sans);
  --font-mono:           ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Weights (Helvetica Neue LT family) */
  --w-thin:              200;
  --w-light:             300;
  --w-regular:           400;
  --w-medium:            500;
  --w-bold:              700;
  --w-black:             900;

  /* Type scale — modular, optimised for clear, calm A-side hierarchies */
  --fs-12:               0.75rem;
  --fs-14:               0.875rem;
  --fs-16:               1rem;
  --fs-18:               1.125rem;
  --fs-20:               1.25rem;
  --fs-24:               1.5rem;
  --fs-32:               2rem;
  --fs-40:               2.5rem;
  --fs-56:               3.5rem;
  --fs-72:               4.5rem;

  --lh-tight:            1.15;
  --lh-snug:             1.35;
  --lh-body:             1.5;
  --lh-loose:            1.7;

  --tracking-tight:      -0.01em;
  --tracking-normal:     0;
  --tracking-wide:       0.02em;

  /* -----------------------------------------------------------
     SPACING — derived from the square grid (Pflichtfeld principle)
     ----------------------------------------------------------- */
  --space-1:             4px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             24px;
  --space-6:             32px;
  --space-7:             48px;
  --space-8:             64px;
  --space-9:             96px;
  --space-10:            128px;

  /* Border radii — the corporate design is square-first. Keep radii tiny. */
  --radius-none:         0;
  --radius-xs:           2px;
  --radius-sm:           4px;
  --radius-md:           6px;
  --radius-pill:         999px;

  /* Elevation — used sparingly; the CD relies on flat blocks of color */
  --shadow-1:            0 1px 2px rgba(48, 80, 136, 0.08);
  --shadow-2:            0 4px 12px rgba(48, 80, 136, 0.10);
  --shadow-3:            0 12px 28px rgba(48, 80, 136, 0.14);

  /* Motion */
  --ease-standard:       cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasized:     cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --dur-fast:            120ms;
  --dur-base:            200ms;
  --dur-slow:            320ms;

  /* Layout */
  --container-max:       1200px;
  --gutter:              24px;
}

/* ------------------------------------------------------------
   SEMANTIC ELEMENT STYLES
   These mirror the CD's role for text + surfaces.
   ------------------------------------------------------------ */
html { font-family: var(--font-sans); color: var(--fg-1); }
body { background: var(--bg-1); font-size: var(--fs-16); line-height: var(--lh-body); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--hsnr-blue);
  margin: 0 0 var(--space-5);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--hsnr-blue);
  margin: 0 0 var(--space-4);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--hsnr-blue);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--hsnr-blue);
  margin: 0 0 var(--space-3);
}

/* Subline / subheading — per CD, Cyan paired with Blue */
.subline {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  color: var(--hsnr-cyan);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}

p { margin: 0 0 var(--space-4); color: var(--fg-1); }
small, .small { font-size: var(--fs-14); color: var(--fg-2); }
.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--hsnr-cyan);
}
strong, b { font-weight: var(--w-bold); }

/* Claim — official: "Hochschule Niederrhein. Dein Weg." */
.hsnr-claim         { font-weight: var(--w-bold); }
.hsnr-claim .label  { color: var(--hsnr-blue); }
.hsnr-claim .punch  { color: var(--hsnr-cyan); }
.hsnr-claim--banner {
  display: inline-block;
  background: var(--hsnr-blue);
  color: var(--hsnr-white);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-14);
}
.hsnr-claim--banner .label,
.hsnr-claim--banner .punch { color: var(--hsnr-white); }

a { color: var(--hsnr-blue); text-decoration: none; }
a:hover { color: var(--hsnr-cyan); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }