/* =========================================================
   Nereus Lab — Colors & Type tokens
   Hungarian cybersecurity services: phishing simulations,
   cyber awareness training, pentesting, red teaming.
   ========================================================= */

/* --- Webfonts --- */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ---------------------------------------------------------
     CORE PALETTE  — directly from brand spec
     --------------------------------------------------------- */
  --nereus-teal-deep:      #0c6170;   /* "NEREUS" wordmark teal — primary brand */
  --nereus-teal-bright:    #37beb0;   /* "LAB" wordmark — accent / CTA  */
  --nereus-navy-deep:      #16384d;   /* shield outline — deepest brand color */
  --nereus-blue-light:     #b3d7e3;   /* shield fill — soft background */
  --nereus-blue-mid:       #5e99b3;   /* shadow side of shield — supporting blue */

  /* Extended steps derived from the core palette
     (lightened/darkened with oklch so they harmonize) */
  --teal-50:  #effaf8;
  --teal-100: #d3f1ec;
  --teal-200: #a9e2da;
  --teal-300: #74cdc2;
  --teal-400: #37beb0;   /* = teal-bright  */
  --teal-500: #1ea096;
  --teal-600: #0c6170;   /* = teal-deep    */
  --teal-700: #0a4f5b;
  --teal-800: #0a3e48;
  --teal-900: #082e35;

  --navy-50:  #eef4f8;
  --navy-100: #d4e3ec;
  --navy-200: #b3d7e3;   /* = blue-light   */
  --navy-300: #87b8cb;
  --navy-400: #5e99b3;   /* = blue-mid     */
  --navy-500: #366f8a;
  --navy-600: #224f6b;
  --navy-700: #16384d;   /* = navy-deep    */
  --navy-800: #0f2838;
  --navy-900: #081823;

  /* Neutrals — cool-leaning grays so they sit with the teals */
  --gray-0:   #ffffff;
  --gray-50:  #f7fafb;
  --gray-100: #eef2f4;
  --gray-200: #dfe5e9;
  --gray-300: #c4ccd2;
  --gray-400: #98a3ac;
  --gray-500: #6c7780;
  --gray-600: #4a555d;
  --gray-700: #313b43;
  --gray-800: #1c252c;
  --gray-900: #0d1418;

  /* ---------------------------------------------------------
     SEMANTIC COLOR TOKENS — what you should actually reach for
     --------------------------------------------------------- */
  /* Foregrounds */
  --fg-1:        var(--navy-700);   /* default text */
  --fg-2:        var(--gray-600);   /* secondary text */
  --fg-3:        var(--gray-500);   /* tertiary / meta */
  --fg-muted:    var(--gray-400);
  --fg-inverse:  var(--gray-0);

  /* Backgrounds */
  --bg-1:        var(--gray-0);     /* page */
  --bg-2:        var(--gray-50);    /* subtle section */
  --bg-3:        var(--gray-100);   /* card alt */
  --bg-tinted:   var(--teal-50);    /* brand-tinted section */
  --bg-deep:     var(--navy-700);   /* dark hero / footer */
  --bg-deepest:  var(--navy-800);

  /* Brand */
  --brand:           var(--teal-deep,  var(--teal-600));
  --brand-accent:    var(--teal-bright, var(--teal-400));
  --brand-on:        var(--gray-0);          /* text on brand fill */
  --brand-soft:      var(--teal-50);
  --brand-soft-fg:   var(--teal-700);

  /* Borders */
  --border-1:    var(--gray-200);
  --border-2:    var(--gray-300);
  --border-strong: var(--navy-700);
  --border-brand:  var(--teal-600);

  /* Semantic status — tuned to the cool palette */
  --success:      #2e9d6a;
  --success-soft: #e1f5ea;
  --warning:      #d99a2b;
  --warning-soft: #fbf0d8;
  --danger:       #c0443a;     /* used sparingly; the brand is calm, not alarmist */
  --danger-soft:  #fbe2df;
  --info:         var(--navy-400);
  --info-soft:    var(--navy-100);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--teal-400) 45%, transparent);

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (1.250 major-third, modest) */
  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs:  0.75rem;     /* 12 */
  --text-sm:  0.875rem;    /* 14 */
  --text-md:  1rem;        /* 16 */
  --text-lg:  1.125rem;    /* 18 */
  --text-xl:  1.375rem;    /* 22 */
  --text-2xl: 1.75rem;     /* 28 */
  --text-3xl: 2.25rem;     /* 36 */
  --text-4xl: 3rem;        /* 48 */
  --text-5xl: 3.75rem;     /* 60 */
  --text-6xl: 4.75rem;     /* 76 */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* used on uppercase eyebrows + LAB-style labels */

  /* ---------------------------------------------------------
     SPACING (4px base)
     --------------------------------------------------------- */
  --space-0:  0;
  --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;
  --space-32: 128px;

  /* ---------------------------------------------------------
     RADII
     --------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------
     SHADOWS — soft, cool-tinted (cast in navy, not black)
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(22, 56, 77, 0.06);
  --shadow-sm: 0 2px 4px rgba(22, 56, 77, 0.07), 0 1px 2px rgba(22, 56, 77, 0.05);
  --shadow-md: 0 6px 16px -4px rgba(22, 56, 77, 0.10), 0 2px 4px rgba(22, 56, 77, 0.06);
  --shadow-lg: 0 18px 40px -12px rgba(22, 56, 77, 0.18), 0 4px 8px rgba(22, 56, 77, 0.06);
  --shadow-xl: 0 32px 64px -16px rgba(22, 56, 77, 0.22);
  --shadow-glow: 0 0 0 6px color-mix(in srgb, var(--teal-400) 18%, transparent);

  /* ---------------------------------------------------------
     LAYOUT
     --------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1240px;
  --container-2xl: 1440px;

  --header-h: 72px;

  /* Easings */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   380ms;
}

/* =========================================================
   SEMANTIC TYPE STYLES — drop-in classes
   ========================================================= */
.t-display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 5vw + 1rem, var(--text-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 3.5vw + 1rem, var(--text-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Eyebrow / "LAB"-style label — uppercase, wide tracking, teal */
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--brand-accent);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}

.t-code,
code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "calt" 1, "ss01" 1;
}

/* =========================================================
   Element defaults (light-touch reset, opt-in via class on <body>)
   ========================================================= */
.nereus-base {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.nereus-base h1 { @extend .t-h1; }   /* documentary; not used by CSS itself */