/* =====================================================================
   Brook Consultancy Partners Ltd — Design Tokens
   Source of truth: pptx template + letterhead
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

:root {
  /* --------------------------------------------------------------
     COLOUR — Brand core
     -------------------------------------------------------------- */
  --bcp-navy:              #0B1F3A;   /* primary ink, brand mark, headlines */
  --bcp-navy-2:            #2A3F60;   /* navy shade — inner panels, quiet layers on dark */
  --bcp-navy-3:            #3A4358;   /* body copy on cream                              */
  --bcp-navy-4:            #4A5468;   /* secondary body / captions on cream              */
  --bcp-navy-5:            #6B7488;   /* muted label copy                                */
  --bcp-navy-6:            #8B97AE;   /* footnotes, page numbers, confidential marks     */
  --bcp-navy-7:            #B9C0CE;   /* placeholder / disabled / captions on navy       */

  /* Cream — the paper */
  --bcp-cream:             #F6F4EE;   /* primary surface / paper                         */
  --bcp-cream-2:           #E3DDC9;   /* warm hairline dividers, subtle bands            */
  --bcp-cream-3:           #D9D3C2;   /* captions on navy                                */

  /* Gold — commercial accent */
  --bcp-gold:              #C8A24B;   /* accent / callout / recommendation               */
  --bcp-gold-ink:          #8C7437;   /* eyebrows, section labels, "on cream" gold ink   */

  /* Sage — strengths / positive */
  --bcp-sage:              #1F5F46;

  /* Coral — risks / warnings */
  --bcp-coral:             #E48B82;

  /* Pure */
  --bcp-white:             #FFFFFF;
  --bcp-black:             #000000;

  /* --------------------------------------------------------------
     COLOUR — Semantic (surface / ink)
     -------------------------------------------------------------- */
  --surface-paper:         var(--bcp-cream);   /* default page bg     */
  --surface-elevated:      var(--bcp-white);   /* card on cream       */
  --surface-inverse:       var(--bcp-navy);    /* dark section        */
  --surface-inverse-2:     var(--bcp-navy-2);  /* card on navy        */
  --surface-hairline:      var(--bcp-cream-2); /* dividers on cream   */

  --ink-primary:           var(--bcp-navy);
  --ink-body:              var(--bcp-navy-3);
  --ink-secondary:         var(--bcp-navy-4);
  --ink-muted:             var(--bcp-navy-5);
  --ink-quiet:             var(--bcp-navy-6);

  --ink-on-inverse:        var(--bcp-cream);
  --ink-on-inverse-quiet:  var(--bcp-cream-3);
  --ink-on-inverse-muted:  var(--bcp-navy-7);

  --accent:                var(--bcp-gold);
  --accent-ink:            var(--bcp-gold-ink);

  --positive:              var(--bcp-sage);
  --negative:              var(--bcp-coral);

  /* --------------------------------------------------------------
     TYPE
     -------------------------------------------------------------- */
  --font-display:  'Source Serif 4', 'Source Serif Pro', 'Georgia', 'Times New Roman', serif;
  --font-body:     'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* Type scale — derived from pptx (in px, at slide native scale) */
  --fs-display-xl:  84px;   /* deck cover — "Advisory Briefing"                */
  --fs-display-l:   72px;   /* section covers                                  */
  --fs-display-m:   57px;   /* section headline                                */
  --fs-hero:        42px;   /* KPI value                                       */
  --fs-h1:          36px;
  --fs-h2:          31px;
  --fs-h3:          28px;
  --fs-h4:          24px;
  --fs-h5:          21px;
  --fs-lead:        18px;   /* lead paragraph                                  */
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-caption:     13px;
  --fs-eyebrow:     12px;   /* uppercase tracked micro-labels                  */
  --fs-micro:       10px;

  /* Tracking (letter-spacing) */
  --track-tight:    -0.02em;   /* display serif                                */
  --track-normal:    0em;
  --track-wide:      0.08em;   /* small caps / eyebrows                        */
  --track-xwide:     0.14em;   /* uppercase section eyebrows                   */

  /* Line-height */
  --lh-display:  1.02;
  --lh-heading:  1.15;
  --lh-body:     1.55;
  --lh-tight:    1.30;

  /* --------------------------------------------------------------
     LAYOUT — Space / radius / stroke
     -------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;   /* default card corner — kept low for editorial feel   */
  --radius-lg:   10px;
  --radius-pill: 999px;

  --stroke-hair:  1px;
  --stroke-rule:  2px;   /* gold underline / section rule                       */
  --stroke-thick: 3px;

  /* Shadows — used sparingly. Editorial docs prefer rules to shadows. */
  --shadow-sm:  0 1px 2px rgba(11, 31, 58, 0.06);
  --shadow-md:  0 4px 14px rgba(11, 31, 58, 0.08);
  --shadow-lg:  0 18px 40px -18px rgba(11, 31, 58, 0.22);

  /* Content widths */
  --content-max:       1200px;
  --measure-body:      68ch;   /* readable paragraph */
  --measure-narrow:    52ch;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emph:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-med:       220ms;
  --dur-slow:      420ms;
}

/* =====================================================================
   BASE — semantic element styles
   Import this file and use the classes below OR use CSS vars directly.
   ===================================================================== */

.bcp-root, .bcp {
  color: var(--ink-body);
  background: var(--surface-paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bcp-display-xl,
.bcp-display-l,
.bcp-display-m,
.bcp h1, .bcp h2, .bcp h3, .bcp h4 {
  font-family: var(--font-display);
  color: var(--ink-primary);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-display);
  font-weight: var(--w-regular);
  margin: 0;
  text-wrap: pretty;
}
.bcp-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); }
.bcp-display-l  { font-size: var(--fs-display-l);  }
.bcp-display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-heading); }

.bcp h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
.bcp h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.bcp h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--w-medium); }
.bcp h4 { font-size: var(--fs-h4); line-height: var(--lh-tight);   font-weight: var(--w-semi);  font-family: var(--font-body); letter-spacing: 0; }

.bcp-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--w-bold);
  color: var(--ink-primary);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-display);
}

.bcp-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-body);
  max-width: var(--measure-body);
}

.bcp p { margin: 0 0 var(--space-4); max-width: var(--measure-body); }

.bcp-caption { font-size: var(--fs-caption); color: var(--ink-secondary); }
.bcp-small   { font-size: var(--fs-small);   color: var(--ink-body); }
.bcp-quiet   { color: var(--ink-quiet); }

.bcp-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-xwide);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.bcp-eyebrow--gold  { color: var(--accent); }
.bcp-eyebrow--sage  { color: var(--positive); }
.bcp-eyebrow--coral { color: var(--negative); }

.bcp-numeral {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* Gold rule — appears under many section labels */
.bcp-rule {
  border: 0;
  border-top: var(--stroke-rule) solid var(--accent);
  width: 32px;
  margin: 0;
}
.bcp-rule--long { width: 100%; border-top-width: var(--stroke-hair); border-color: var(--surface-hairline); }

/* Dark surface variant */
.bcp-dark {
  background: var(--surface-inverse);
  color: var(--ink-on-inverse);
}
.bcp-dark h1, .bcp-dark h2, .bcp-dark h3, .bcp-dark .bcp-display-xl, .bcp-dark .bcp-display-l, .bcp-dark .bcp-display-m, .bcp-dark .bcp-hero { color: var(--ink-on-inverse); }
.bcp-dark .bcp-caption, .bcp-dark p { color: var(--ink-on-inverse-quiet); }
.bcp-dark .bcp-quiet { color: var(--ink-on-inverse-muted); }