/* ============================================================
   OUTLOVE — Colors & Type
   Source of truth for brand tokens. Extracted from the official
   OUTLOVE PowerPoint Template (theme1.xml + Brand Guide slides).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- PRIMARY COLOURS ---------- */
  --ol-navy:           #3F3A5E;  /* Navy Purple — primary brand */
  --ol-orange:         #D98056;  /* Terracotta Orange — accent */
  --ol-orange-deep:    #DC8025;  /* Deep Orange — secondary accent */

  /* ---------- SECONDARY COLOURS ---------- */
  --ol-sage:           #B3C6BF;  /* Sage Green */
  --ol-teal:           #5E6B70;  /* Dark Teal */
  --ol-rose:           #F07D8D;  /* Rose Pink */
  --ol-gold:           #FFCC66;  /* Gold */
  --ol-sky:            #94B6C6;  /* Sky Blue */
  --ol-purple-mid:     #5F5B79;  /* Mid Purple */

  /* ---------- NEUTRALS ---------- */
  --ol-ink:            #2D2D2D;  /* Deep grey for body text */
  --ol-grey-light:     #F2F2F2;  /* Light Grey — page wash, table stripes */
  --ol-white:          #FFFFFF;
  --ol-paper:          #FAFAF7;  /* Optional warm off-white surface */

  /* ---------- SEMANTIC ROLES ---------- */
  --fg-1:              var(--ol-navy);         /* primary text */
  --fg-2:              var(--ol-purple-mid);   /* secondary text */
  --fg-3:              var(--ol-teal);         /* tertiary / captions */
  --fg-inverse:        var(--ol-white);
  --bg-page:           var(--ol-white);
  --bg-surface:        var(--ol-white);
  --bg-muted:          var(--ol-grey-light);
  --bg-inverse:        var(--ol-navy);
  --accent:            var(--ol-orange);
  --accent-hover:      var(--ol-orange-deep);
  --link:              var(--ol-orange);
  --link-visited:      var(--ol-purple-mid);
  --border-soft:       rgba(179, 198, 191, 0.6);     /* sage @ 60% */
  --border-strong:     var(--ol-sage);
  --border-divider:    rgba(63, 58, 94, 0.12);

  /* ---------- FOOTER BAR (signature element) ---------- */
  --footer-1: var(--ol-teal);
  --footer-2: var(--ol-sage);
  --footer-3: var(--ol-orange);
  --footer-4: var(--ol-rose);

  /* ---------- CHART SEQUENCE (use in order) ---------- */
  --chart-1: var(--ol-orange);
  --chart-2: var(--ol-navy);
  --chart-3: var(--ol-sage);
  --chart-4: var(--ol-rose);
  --chart-5: var(--ol-gold);
  --chart-6: var(--ol-sky);
  --chart-7: var(--ol-orange-deep);
  --chart-8: var(--ol-purple-mid);
  --chart-9: var(--ol-teal);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Aptos is used in the source deck for body. It is not freely web-licensed;
     we substitute Montserrat across the board for consistency on web. Swap
     to "Aptos" if available locally. */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Type scale — driven by the deck's 16pt title / 14pt body / 10.5pt caption.
     Scaled up for screen. */
  --fs-display: 56px;
  --fs-h1:      40px;
  --fs-h2:      28px;
  --fs-h3:      20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;     /* used on uppercase eyebrows */
  --tracking-wider:  0.12em;

  /* ---------- SPACING ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* ---------- RADII ---------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(63, 58, 94, 0.06), 0 1px 1px rgba(63, 58, 94, 0.04);
  --shadow-2: 0 4px 12px rgba(63, 58, 94, 0.08), 0 1px 2px rgba(63, 58, 94, 0.05);
  --shadow-3: 0 12px 32px rgba(63, 58, 94, 0.12), 0 4px 8px rgba(63, 58, 94, 0.06);
  --shadow-focus: 0 0 0 3px rgba(217, 128, 86, 0.35);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   Semantic Type Styles
   ============================================================ */

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

.ol-display, h1.ol-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1, .ol-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* The signature two-line deck title: line 1 orange, line 2 navy. */
.ol-title-2line { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: 1.1; }
.ol-title-2line .l1 { display: block; color: var(--ol-orange); }
.ol-title-2line .l2 { display: block; color: var(--ol-navy); }

h2, .ol-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h3, .ol-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .ol-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  text-wrap: pretty;
}

.ol-lead {
  font-size: 18px;
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.ol-small  { font-size: var(--fs-small);  color: var(--fg-2); }
.ol-caption {
  font-size: var(--fs-caption);
  color: var(--ol-purple-mid);
  letter-spacing: var(--tracking-wide);
}

.ol-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: 12px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ol-orange);
}

a, .ol-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 128, 86, 0.35);
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
a:hover, .ol-link:hover { color: var(--ol-orange-deep); border-bottom-color: currentColor; }

code, kbd, samp { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.95em; }