/* =====================================================================
 * PROSTEP / BHC Design System — Colors & Type
 * Source: PROSTEP AG V3.0 theme (theme1.xml), Mini-Styleguide 2026 PDF,
 * Firmenpräsentation 2026.
 * --------------------------------------------------------------------- */

/* --- Fonts ---------------------------------------------------------- */

/*  The brand template specifies "Segoe UI Variable Display" — Microsoft's
 *  system font, which renders correctly inside PowerPoint / Windows but
 *  is not freely redistributable for the web. We fall back to the
 *  closest cross-platform stacks. Source Sans 3 is loaded as a final
 *  open-source substitute and has similar proportions / weights.
 *  FLAG: if exact Segoe rendering matters in HTML deliverables, drop
 *  the actual ttf into fonts/segoe-ui-variable.ttf and the @font-face
 *  block below will pick it up.
 */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700;900&display=swap");

@font-face {
  font-family: "Segoe UI Variable Display Local";
  src: local("Segoe UI Variable Display"),
       local("Segoe UI Variable"),
       local("Segoe UI"),
       url("fonts/segoe-ui-variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* --- Color tokens (raw) -----------------------------------------
   * Verified against PROSTEP AG V3.0 theme1.xml (clrScheme "PROSTEP GROUP")
   * + Mini-Styleguide page 7.
   */

  /* Primary */
  --prostep-blue:        #05658F;   /* RGB 5  101 143 — PRIMARY */
  --prostep-blue-deep:   #1E4D89;   /* RGB 30  77 137 — gradient end / accent6 */
  --prostep-blue-mid:    #115A8C;   /* gradient midpoint used in master strip */
  --prostep-gray:        #7F7F7F;   /* RGB 127 127 127 — PRIMARY neutral */

  /* Secondary palette (theme accent1..6) */
  --accent-sky:          #3498DB;   /* RGB  52 152 219 — bright cyan-blue */
  --accent-red:          #B70B34;   /* RGB 183  11  52 — alert / negative */
  --accent-green:        #9BBB59;   /* RGB 155 187  89 — success / positive */
  --accent-yellow:       #F8AD02;   /* RGB 248 173   2 — warning / highlight */
  --accent-orange:       #E57833;   /* RGB 229 120  51 — BHC brand orange */
  --accent-deep-blue:    #1E4D89;   /* RGB  30  77 137 — duplicate alias */

  /* BHC sub-brand */
  --bhc-orange:          #E57833;   /* same as accent-orange — the BHC mark */
  --bhc-orange-deep:     #D86A1F;   /* hand-tuned darker step for hover/press */

  /* Neutrals */
  --black:               #000000;
  --white:               #FFFFFF;
  --gray-900:            #1A1A1A;
  --gray-700:            #4A4A4A;
  --gray-500:            #7F7F7F;
  --gray-300:            #BFBFBF;
  --gray-200:            #D9D9D9;
  --gray-100:            #EDEDED;
  --gray-50:             #F5F7F9;

  /* Surface backgrounds used by template */
  --bg-night:            #0A1E3A;   /* approx of cover photo dark blue */
  --bg-night-deep:       #061224;

  /* --- Brand gradients ------------------------------------------- */
  --grad-brand:          linear-gradient(90deg, #04678F 0%, #115A8C 50%, #1E4D89 100%); /* @kind color */
  --grad-brand-vertical: linear-gradient(180deg, #04678F 0%, #1E4D89 100%); /* @kind color */
  --grad-bhc:            linear-gradient(90deg, #E57833 0%, #D86A1F 100%); /* @kind color */

  /* --- Semantic mapping ----------------------------------------- */
  --fg-primary:          var(--black);
  --fg-secondary:        var(--gray-700);
  --fg-muted:            var(--gray-500);
  --fg-on-dark:          var(--white);

  --bg-page:             var(--white);
  --bg-page-alt:         var(--gray-50);
  --bg-dark:             var(--prostep-blue);
  --bg-dark-photo:       var(--bg-night);

  --link:                var(--prostep-blue);
  --link-visited:        var(--gray-500);

  --positive:            var(--accent-green);
  --warning:             var(--accent-yellow);
  --negative:            var(--accent-red);
  --info:                var(--accent-sky);

  --border:              var(--gray-200);
  --border-strong:       var(--gray-300);

  /* --- Typography stack ----------------------------------------- */
  --font-sans:
      "Segoe UI Variable Display Local",
      "Segoe UI Variable Display",
      "Segoe UI Variable",
      "Segoe UI",
      system-ui,
      "Source Sans 3",
      -apple-system,
      "Helvetica Neue",
      Arial,
      sans-serif;

  --font-display: var(--font-sans);   /* same family, just heavier */
  --font-mono:    ui-monospace, "Cascadia Mono", "Consolas", "SF Mono", Menlo, monospace;

  /* --- Type scale (in px, matches the deck conventions) ---------
   * The template uses these sizes in pt; values are converted to px
   * for 1920×1080 slide rendering (pt × 1.333).
   * Deck title:  44pt → 59px (sz=4400 in OOXML)
   * Slide head:  24pt → 32px (sz=2400)
   * Section H:   18pt → 24px (sz=1800)
   * Body:        16pt → 21px (sz=1600)
   * Caption:      8pt → 11px (sz=800 — footer line)
   */
  --fs-display:   59px;
  --fs-h1:        44px;
  --fs-h2:        32px;
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body:      18px;
  --fs-body-sm:   16px;
  --fs-caption:   13px;
  --fs-micro:     11px;

  --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 */
  --fw-black:     900;  /* @kind font */

  --lh-tight:     1.05;  /* @kind font */
  --lh-snug:      1.2;   /* @kind font */
  --lh-normal:    1.4;   /* @kind font */
  --lh-relaxed:   1.55;  /* @kind font */

  --tracking-caps:    0.04em;     /* used by ALL-CAPS deck titles — @kind font */
  --tracking-tight:  -0.01em;     /* @kind font */

  /* --- Spacing scale (8-pt grid) --------------------------------- */
  --space-0:   0;
  --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;

  /* --- Radii ----------------------------------------------------- */
  /* The template is overwhelmingly square. Rounding is minimal. */
  --radius-0:   0;
  --radius-1:   2px;
  --radius-2:   4px;       /* used for tags, chips */
  --radius-3:   8px;       /* cards (sparingly) */
  --radius-pill: 999px;

  /* --- Skew / parallelogram primitives --------------------------- */
  /* The brand's signature shape uses a 30° slope from the vertical
   * (= 60° from horizontal), verified against the official PROSTEP
   * logo polygon: 648.2 / 1122.72 = 0.5774 = tan(30°).
   * To keep the angle CONSTANT across elements of different widths,
   * the bevel must be set in absolute px per element:
   *     --pgram-bevel: calc(0.5774 * element-height)
   * Each utility class below picks a height + matching bevel.
   */
  --pgram-angle:        30deg; /* @kind other */
  --pgram-ratio:        0.5774; /* @kind other */

  /* Default capsule bevel for a 31px-tall tag */
  --pgram-bevel-sm:     8px;          /* 14px-tall strip — @kind spacing */
  --pgram-bevel-md:    18px;          /* 31px-tall tag — @kind spacing */
  --pgram-bevel-lg:    28px;          /* 48px-tall tag — @kind spacing */

  --clip-skew-right:    polygon(0 0, 100% 0, calc(100% - var(--pgram-bevel-md)) 100%, 0 100%); /* @kind other */
  --clip-skew-left:     polygon(var(--pgram-bevel-md) 0, 100% 0, 100% 100%, 0 100%); /* @kind other */
  --clip-skew-both:     polygon(var(--pgram-bevel-md) 0, 100% 0, calc(100% - var(--pgram-bevel-md)) 100%, 0 100%); /* @kind other */

  /* --- Elevation / shadow --------------------------------------- */
  /* The PowerPoint theme defines a single outer drop shadow at
   * blurRad 40000, dist 20000–23000 EMU, dir 5400000 (180° i.e. down),
   * alpha 35–38%. Below converts EMU → px (rough 9525 EMU = 1pt).
   */
  --shadow-1:  0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-2:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-3:  0 6px 20px rgba(0, 0, 0, 0.14);
  --shadow-brand: 0 6px 24px rgba(5, 101, 143, 0.20);

  /* --- Borders --------------------------------------------------- */
  --border-default:  1px solid var(--border);
  --border-strong-1: 1px solid var(--border-strong);
  --rule-thin:       1px solid var(--gray-200);
  --rule-brand:      2px solid var(--prostep-blue);
}

/* ===================================================================
 * SEMANTIC TYPOGRAPHY CLASSES
 *  Use these directly OR via @apply-like nesting; keep selectors flat
 *  so they survive being copied into slide JSX.
 * ================================================================= */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.ds-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--white);
}

.ds-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--prostep-blue);
  letter-spacing: var(--tracking-tight);
}

.ds-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--prostep-blue);
}

.ds-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.ds-h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}

.ds-eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--prostep-blue);
}

.ds-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.ds-body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.ds-caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

.ds-micro {
  font-size: var(--fs-micro);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

.ds-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ds-link:visited { color: var(--link-visited); }

/* On-dark variants — used over the cover photo / blue panels */
.on-dark .ds-h1,
.on-dark .ds-h2,
.on-dark .ds-h3,
.on-dark .ds-body,
.on-dark .ds-eyebrow { color: var(--white); }
.on-dark .ds-body-sm,
.on-dark .ds-caption,
.on-dark .ds-micro { color: rgba(255,255,255,0.78); }

/* ===================================================================
 * BRAND-SHAPE UTILITIES
 *  Reusable primitives for the parallelogram / skewed-bar motif.
 * ================================================================= */

.ds-parallelogram {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  height: 31px;
  padding: 6px 28px 6px 14px;
  background: var(--prostep-blue);
  color: var(--white);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--pgram-bevel-md)) 100%, 0 100%);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 19px;
}

.ds-parallelogram--lg {
  height: 48px;
  padding: 12px 42px 12px 20px;
  font-size: 18px;
  line-height: 24px;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--pgram-bevel-lg)) 100%, 0 100%);
}

.ds-parallelogram--bhc { background: var(--bhc-orange); }
.ds-parallelogram--grad { background: var(--grad-brand); }