/* =========================================================================
   OPTOMET DESIGN SYSTEM — Foundations: Colors & Typography
   Laser Doppler Vibrometry · optomet.de
   -------------------------------------------------------------------------
   Single source of truth for color + type tokens. Import this first, then
   layer component CSS on top. Built around a Bootstrap-style 12-column grid
   (see grid.css) so the relaunch is fully responsive without workarounds.
   ========================================================================= */

/* ---------- Webfont (self-hosted variable, latin subset) --------------- */
/* Montserrat — the single brand typeface (geometric sans). One variable
   file covers the full weight axis (Thin 100 → Bold 700). Used for display,
   headings, body and UI alike. Per the 2026 typography overhaul. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/montserrat-latin-variable.woff2') format('woff2');
}

:root {
  /* =====================================================================
     COLOR — Brand
     The brand is built on a single confident red against black + neutral
     greys. Red is used sparingly for emphasis, CTAs, and headings.
     ===================================================================== */
  --opt-red:            #D71920;  /* primary brand red (logo "met.")        */
  --opt-red-hover:      #B3141A;  /* darker red — button / link hover       */
  --opt-red-deep:       #C82020;  /* legacy deep red (download badge, tabs)  */
  --opt-red-legacy:     #CC0001;  /* original site red — kept for parity     */

  /* Ink / neutrals */
  --opt-black:          #000000;  /* logo "opto", display headings           */
  --opt-near-black:     #1A1A1A;  /* footer bottom bar, dark sections        */
  --opt-ink:            #1E1E1E;  /* body text on light                      */
  --opt-grey-dark:      #5B5D5E;  /* secondary text, default link color      */
  --opt-grey:           #8A8C8D;  /* muted / meta text                       */
  --opt-grey-light:     #D8D9DA;  /* borders, dividers                       */
  --opt-grey-lighter:   #EEEEEE;  /* hairlines, subtle fills                 */
  --opt-grey-ultra:     #F4F4F4;  /* footer surface, section tint            */
  --opt-grey-50:        #F9F9F9;  /* header surface, lightest tint           */
  --opt-white:          #FFFFFF;

  /* Steel blue — secondary accent (legacy secondary-nav bar, charts) */
  --opt-blue:           #637282;
  --opt-blue-dark:      #4C5763;

  /* Support hues (status / data viz on measurement imagery) */
  --opt-yellow:         #FFE015;  /* highlight / caution                     */
  --opt-green:          #2E7D32;  /* success / "available"                   */

  /* Button neutral */
  --opt-btn-grey:       #F5F5F5;

  /* =====================================================================
     SEMANTIC ROLES
     ===================================================================== */
  --bg-page:            var(--opt-white);
  --bg-surface:         var(--opt-grey-ultra);
  --bg-header:          var(--opt-white);
  --bg-footer:          var(--opt-grey-ultra);
  --bg-footer-bottom:   var(--opt-near-black);
  --bg-inverse:         var(--opt-near-black);

  --fg-default:         var(--opt-ink);
  --fg-muted:           var(--opt-grey-dark);
  --fg-subtle:          var(--opt-grey);
  --fg-inverse:         var(--opt-white);
  --fg-accent:          var(--opt-red);

  --border-default:     var(--opt-grey-light);
  --border-subtle:      var(--opt-grey-lighter);

  --link-color:         var(--opt-grey-dark);
  --link-hover:         var(--opt-red);

  /* =====================================================================
     TYPE — Montserrat is the single brand family (display + body + UI).
     The 2026 overhaul moves away from uppercase-condensed headlines to a
     light, sentence-case, geometric editorial voice. Weight does the work:
     Light (300) for big display, Regular (400) body, Medium (500) /
     SemiBold (600) for emphasis & labels, Thin (100) for oversized numerals.
     ===================================================================== */
  --font-display: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Weight tokens */
  --fw-thin:      100; /* @kind font */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */

  /* Fluid type scale (min → max via clamp). Body baseline 17px. */
  --fs-display:   clamp(46px, 7vw, 104px); /* @kind font */ /* hero — Montserrat Light, sentence case */
  --fs-h1:        clamp(38px, 5vw, 64px); /* @kind font */
  --fs-h2:        clamp(26px, 3vw, 38px); /* @kind font */ /* section heading — red, Medium */
  --fs-h3:        clamp(21px, 2.2vw, 27px); /* @kind font */
  --fs-h4:        19px; /* @kind font */
  --fs-lead:      clamp(19px, 1.6vw, 23px); /* @kind font */ /* intro / subhead */
  --fs-body:      17px; /* @kind font */
  --fs-small:     15px; /* @kind font */
  --fs-eyebrow:   13px; /* @kind font */ /* uppercase tracked label */

  --lh-tight:     1.05; /* @kind font */
  --lh-snug:      1.2; /* @kind font */
  --lh-normal:    1.5; /* @kind font */
  --lh-relaxed:   1.7; /* @kind font */

  /* Geometric sans wants slight negative tracking at display sizes */
  --tracking-display: -0.02em; /* @kind font */
  --tracking-h1:      -0.015em; /* @kind font */
  --tracking-h2:      -0.005em; /* @kind font */
  --tracking-eyebrow: 0.16em; /* @kind font */

  /* =====================================================================
     SPACING / RADII / SHADOW / MOTION  (see spacing.css for in-use demo)
     ===================================================================== */
  --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;

  --radius-sm:   4px;   /* hover chips, inputs            */
  --radius-md:   8px;   /* cards, media                   */
  --radius-lg:   16px;  /* large feature cards            */
  --radius-pill: 24px;  /* ghost / pill buttons           */
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* Grid (12-column, Bootstrap-compatible) */
  --container-max: 1200px;
  --gutter: 24px;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY — apply directly or copy into your component CSS
   ========================================================================= */
.opt-body,
body.opt {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero display — Montserrat Light, sentence case, large */
.opt-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--opt-black);
}

h1, .opt-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-h1);
  color: var(--opt-black);
}

/* Section heading — the signature red mark, now Medium sentence case */
h2, .opt-h2 {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h2);
  color: var(--opt-red);
}

h3, .opt-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--opt-black);
}

h4, .opt-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--opt-ink);
}

.opt-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.opt-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--opt-red);
}

p, .opt-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

small, .opt-small {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

a, .opt-link {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover, .opt-link:hover { color: var(--link-hover); }

strong, b { font-weight: var(--fw-semibold); }

/* Oversized numeral / stat — Montserrat Thin */
.opt-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--opt-black);
}