/* =========================================================
   SUPER BOCK GROUP — Design System
   colors_and_type.css
   ---------------------------------------------------------
   Source of truth: SBG Brand Guidelines (2017) +
   DSI extensions (Apr 2026, v1.5).
   ========================================================= */

:root {
  /* ----- 1. Brand colors (official, Brand Guidelines 2017) ----- */
  --sbg-red:        #AB2328;   /* Pantone 7621 C — primary brand */
  --sbg-gold:       #A79966;   /* Pantone 871 C — secondary */
  --sbg-white:      #FFFFFF;
  --sbg-black:      #000000;
  --sbg-grey:       #6D6E71;   /* institutional 70% black */

  /* ----- 1b. Document variants ----- */
  --red-dark:       #7A1220;   /* hover, total rows in tables */
  --red-legacy:     #A51C30;   /* DSI legacy (used in HTML doc system) */
  --red-word:       #C00000;   /* exact value used in Word styles */
  --gold-dark:      #5E4F38;   /* dark variant of gold (heading 3) */
  --gold-soft:      #B8A46E;   /* eyebrow gold seen in HTML cover */

  /* ----- 1c. Support / UI greys ----- */
  --light-gray:     #F4F4F4;   /* card bg, blockquote, alt rows */
  --mid-gray:       #E0E0E0;   /* dividers, table borders */
  --footer-bg:      #EBEBEB;   /* footer band */
  --header-border:  #CCCCCC;   /* thin decorative line on PPTX header */

  /* ----- 1d. Typography colors ----- */
  --text-dark:      #1A1A1A;   /* primary body / headings */
  --text-mid:       #555555;   /* subtitles, italic, secondary */
  --text-muted:     #888888;   /* labels, footnotes, metadata */
  --text-word:      #262626;   /* Word body color */

  /* ----- 1e. Semantic role tokens (use these in components) ----- */
  --fg-1:           var(--text-dark);
  --fg-2:           var(--text-mid);
  --fg-3:           var(--text-muted);
  --fg-on-red:      var(--sbg-white);
  --fg-on-gold:     var(--sbg-white);

  --bg-page:        var(--sbg-white);
  --bg-surface:     var(--sbg-white);
  --bg-subtle:      var(--light-gray);
  --bg-footer:      var(--footer-bg);
  --bg-cover:       var(--sbg-red);
  --bg-cover-deep:  var(--red-dark);

  --border-soft:    var(--mid-gray);
  --border-faint:   var(--header-border);

  --accent:         var(--sbg-red);
  --accent-2:       var(--sbg-gold);
  --accent-hover:   var(--red-dark);

  /* ----- 2. Type families -----
     Brand fonts: Klavika (display) + Plantin (editorial).
     Office/system fallback: Arial/Calibri (REQUIRED for editable
     .docx/.pptx/.xlsx). Klavika and Plantin are paid foundry fonts
     (Process Type / Monotype) — not bundled. We substitute on the web
     with the closest free Google Font matches:
       - Klavika  →  Saira Semi Condensed (geometric humanist sans)
                     — flag: substitution; brand team to confirm
       - Plantin  →  PT Serif (transitional serif)
                     — flag: substitution; brand team to confirm
  */
  --font-display:   "Saira Semi Condensed", "Klavika", "Arial Narrow", Arial, sans-serif;
  --font-editorial: "PT Serif", "Plantin", Georgia, "Times New Roman", serif;
  --font-system:    Arial, "Helvetica Neue", Helvetica, Calibri, "Segoe UI", sans-serif;
  --font-body:      var(--font-system);  /* default for digital docs */
  --font-mono:      "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ----- 3. Type scale (digital surfaces — based on PPTX scale) ----- */
  --fs-xxs:  10px;   /* eyebrow, badge */
  --fs-xs:   12px;   /* footnote, source */
  --fs-sm:   14px;   /* small body, captions */
  --fs-base: 16px;   /* body */
  --fs-md:   18px;   /* lead body */
  --fs-lg:   22px;   /* content title */
  --fs-xl:   28px;   /* section heading */
  --fs-2xl:  40px;   /* slide title */
  --fs-3xl:  56px;   /* cover title */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* IMPORTANT — Brand rule: NEVER use letter-spacing.
     We deliberately do NOT define a tracking token. */

  /* ----- 4. Spacing scale (8pt grid) ----- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ----- 5. Radii — heritage brand favors square/minimal corners ----- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* ----- 6. Shadows — restrained; PPTX uses outer 6/2/135/7% ----- */
  --shadow-card:    0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-popover: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-pptx:    2px 2px 6px rgba(0,0,0,0.07);

  /* ----- 7. Borders ----- */
  --border-thin: 1px solid var(--border-soft);
  --border-accent-left: 4px solid var(--accent);
  --border-accent-left-gold: 4px solid var(--accent-2);
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Apply these on the corresponding HTML element when
   working inside a .sbg scope.
   ========================================================= */

.sbg {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sbg .eyebrow,
.sbg [data-role="eyebrow"] {
  font-family: var(--font-system);
  font-size: var(--fs-xxs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--accent-2);
  /* NO letter-spacing — brand rule §3 */
}

.sbg h1,
.sbg .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  color: var(--accent);
  margin: 0 0 var(--sp-4);
}

.sbg h2,
.sbg .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: var(--sp-1);
  margin: var(--sp-6) 0 var(--sp-3);
}

.sbg h3,
.sbg .h3 {
  font-family: var(--font-system);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: var(--sp-5) 0 var(--sp-2);
}

.sbg h4,
.sbg .h4 {
  font-family: var(--font-system);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--accent-hover);
  margin: var(--sp-4) 0 var(--sp-2);
}

.sbg p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

.sbg .lead {
  font-size: var(--fs-md);
  color: var(--fg-2);
  font-style: italic;
}

.sbg small,
.sbg .caption {
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

.sbg blockquote {
  background: var(--bg-subtle);
  border-left: 6px solid var(--accent);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--fg-1);
}

.sbg code,
.sbg .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-subtle);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-1);
}

/* Section bar — the iconic SBG red header used in PPTX/Word */
.sbg .section-bar {
  background: var(--accent);
  color: var(--fg-on-red);
  font-family: var(--font-system);
  font-weight: var(--fw-bold);
  font-size: 15px;
  text-transform: uppercase;
  padding: 10px 16px;
  border-left: 4px solid var(--border-faint);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Chip used inside the section bar */
.sbg .section-chip {
  width: 28px;
  height: 28px;
  background: var(--sbg-white);
  color: var(--accent);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Decorative gold line — used on cover slides */
.sbg .gold-line {
  height: 2px;
  background: var(--accent-2);
  width: 100%;
}