/* ============================================================
   TRS™ — The Readiness System · Foundations
   Colors + Type tokens. Import this in any TRS artifact.
   by VISTAPLAN-Group GmbH · "Ready by design."
   ============================================================ */

/* --- Web-font upgrade (tested per brief) ----------------------
   The official brand fonts are Calibri Light (titles) + Calibri
   (text) + Consolas (mono labels). Those are not web-available,
   so we load metric-adjacent humanist/grotesk web fonts and keep
   Calibri/Consolas as the local fallback in every stack.
   --> If the web upgrade does NOT read "edler", delete this @import
       and the families fall back to Calibri automatically.        */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- BRAND BLUES (primary) ---- */
  --navy-deep:#001A35;   /* dark bands, deepest backgrounds */
  --navy:#003366;        /* titles, primary text, primary buttons-on-light */
  --navy-mid:#1a5a8a;    /* gradient mid-stop on dark bands */
  --blue:#0099CC;        /* the TRS accent — logo, links, buttons, top-borders */
  --blue-bright:#00B8E8; /* high-energy highlight (use sparingly) */
  --blue-light:#6cbedb;  /* highlights & strong text on dark */
  --blue-100:#cfe5f0;    /* soft tint borders */
  --blue-50:#e6f4f9;     /* icon chips, soft fills */

  /* ---- WARM ACCENT (the "Wärme" family — DNA & warmth) ---- */
  --gold:#C89F5A;        /* Warm-Gold — DNA, accents, principle lines, eyebrow dash, badges */
  --gold-deep:#A07730;   /* Warm-Tief — eyebrow & warm micro-text on light */
  --warm-hell:#F3E9D6;   /* Warm-Hell — DNA boxes, soft warm surfaces (gold CAN fill, gently) */
  --warm-sand:#FBF2DD;   /* Warm-Sand — next-steps, gentle hints */

  /* ---- NEUTRALS / PAPER ---- */
  --ink:#0F1C2D;         /* default body text */
  --muted:#5D6B7A;       /* secondary text, captions */
  --line:#DEE5EC;        /* hairline borders, dividers */
  --paper:#f4f7fa;       /* web card surface */
  --paper-doc:#FAFBFC;   /* document page paper (VI guide canon) */
  --doc-surface:#fbfcfd; /* block fills inside documents */
  --paper-blue:#F5F9FC;  /* tinted section background */
  --white:#ffffff;

  /* ---- STATUS / MATURITY MARKS ---- */
  --status-done:#2e8b57;    /* ✓ vorhanden  */
  --status-partial:#d8920f; /* ◐ teilweise  */
  --status-todo:#c5d2dd;    /* ○ todo (border) */

  /* ---- DARK-BAND TEXT (semantic, on navy) ---- */
  --on-dark:#ffffff;
  --on-dark-muted:#b9cbe0;
  --on-dark-faint:#9fb4cc;
  --on-dark-mono:#7e95b0;

  /* ---- GRADIENTS / SURFACES ---- */
  --band-dark:linear-gradient(135deg,#001A35 0%,#003366 65%,#1a5a8a 100%);
  --hero-veil:linear-gradient(180deg,rgba(0,26,53,.30) 0%,rgba(0,26,53,.20) 38%,rgba(0,26,53,.82) 100%);
  --surface-glass:rgba(255,255,255,.06);

  /* ---- TYPE FAMILIES ----
     Display + body share ONE family (Light for titles, Regular for
     body) — exactly mirroring the Calibri Light / Calibri pairing. */
  --font-display:'Hanken Grotesk','Calibri Light','Calibri','Segoe UI',sans-serif;
  --font-body:'Hanken Grotesk','Calibri','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','Consolas',ui-monospace,'SFMono-Regular',monospace;

  /* ---- TYPE WEIGHTS ---- */
  --w-light:300;   /* display / titles */
  --w-reg:400;     /* body */
  --w-med:500;     /* nav, buttons */
  --w-semi:600;    /* emphasis, labels */
  --w-bold:700;    /* mono eyebrows */

  /* ---- TYPE SCALE (clamp = fluid) ---- */
  --t-display:clamp(36px,5.6vw,60px);  /* hero H1 */
  --t-h2:clamp(28px,4vw,40px);         /* section H2 */
  --t-h3:21px;                         /* card titles */
  --t-lead:19px;                       /* hero / section lead */
  --t-body:16px;                       /* default */
  --t-small:14px;                      /* card body, captions */
  --t-eyebrow:11px;                    /* mono eyebrow */

  /* ---- RADII ---- */
  --r-card:4px;     /* light content cards (subtle) */
  --r-btn:7px;      /* buttons, inputs */
  --r-band:12px;    /* cards on dark bands, callouts */
  --r-pill:30px;    /* chips, badges */

  /* ---- SPACING / RHYTHM ---- */
  --gap:24px;            /* default grid gap */
  --section-y:84px;      /* vertical padding per section */
  --wrap:1120px;         /* max content width */
  --wrap-pad:24px;       /* horizontal gutter */

  /* ---- ELEVATION ---- */
  --shadow-btn:0 8px 24px rgba(0,153,204,.28);     /* primary button glow */
  --shadow-card:0 12px 28px rgba(0,51,102,.08);    /* light card hover */
  --shadow-card-lg:0 14px 34px rgba(0,51,102,.09); /* method/step hover */
  --shadow-dark:0 20px 44px rgba(0,0,0,.28);       /* card hover on dark band */
  --shadow-drawer:-10px 0 40px rgba(0,0,0,.18);    /* slide-over drawer */

  /* ---- MOTION ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.2s;
  --dur:.25s;
  --dur-slow:.6s;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.trs-display{
  font-family:var(--font-display);font-weight:var(--w-light);
  font-size:var(--t-display);line-height:1.08;letter-spacing:-.025em;
  color:var(--navy);text-wrap:balance;
}
.trs-h2{
  font-family:var(--font-display);font-weight:var(--w-light);
  font-size:var(--t-h2);line-height:1.12;letter-spacing:-.01em;color:var(--navy);
}
.trs-h2 strong,.trs-display strong{color:var(--blue);font-weight:var(--w-med);}
.trs-h3{
  font-family:var(--font-display);font-weight:var(--w-semi);
  font-size:var(--t-h3);line-height:1.2;letter-spacing:-.005em;color:var(--navy);
}
.trs-lead{
  font-family:var(--font-body);font-weight:var(--w-reg);
  font-size:var(--t-lead);line-height:1.55;color:var(--muted);
}
.trs-body{
  font-family:var(--font-body);font-weight:var(--w-reg);
  font-size:var(--t-body);line-height:1.6;color:var(--ink);
}
.trs-small{font:var(--w-reg) var(--t-small)/1.55 var(--font-body);color:var(--muted);}

/* Eyebrow: Calibri/body BOLD caps + leading gold dash (NOT mono — brand canon) */
.trs-eyebrow{
  font-family:var(--font-body);font-weight:var(--w-bold);font-size:var(--t-eyebrow);
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);
  display:inline-flex;align-items:center;
}
.trs-eyebrow::before{
  content:"";display:inline-block;width:18px;height:2px;
  background:var(--gold);margin-right:9px;
}
.trs-eyebrow.on-dark{color:var(--gold);}

/* Mono label (phase / kind / by-line) */
.trs-label{
  font-family:var(--font-mono);font-weight:var(--w-semi);font-size:var(--t-eyebrow);
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
}

/* Tagline — light italic blue */
.trs-tagline{
  font-family:var(--font-display);font-weight:var(--w-light);font-style:italic;
  color:var(--blue);letter-spacing:-.01em;
}

/* Wordmark — the big "TRS™" mark: Calibri Light 300, navy, blue raised ™ */
.trs-wordmark{
  font-family:var(--font-display);font-weight:var(--w-light);
  color:var(--navy);line-height:.85;letter-spacing:-.06em;font-size:74px;
}
.trs-wordmark .tm{font-size:.19em;vertical-align:super;color:var(--blue);
  font-weight:var(--w-light);margin-left:3px;letter-spacing:0;}