/* =========================================================
   Bloom Design System — Core Tokens
   Colors + Type foundations for all Bloom surfaces
   ========================================================= */

/* ---------- Poppins — self-hosted brand fonts ---------- */
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Thin.ttf')            format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ThinItalic.ttf')      format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraLight.ttf')      format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraLightItalic.ttf')format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Light.ttf')           format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-LightItalic.ttf')     format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.ttf')         format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Italic.ttf')          format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.ttf')          format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-MediumItalic.ttf')    format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.ttf')        format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBoldItalic.ttf')  format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.ttf')            format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-BoldItalic.ttf')      format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraBold.ttf')       format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Black.ttf')           format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-BlackItalic.ttf')     format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* PT Serif — self-hosted brand fonts */
@font-face { font-family: 'PT Serif'; src: url('fonts/PTSerif-Regular.ttf')    format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PT Serif'; src: url('fonts/PTSerif-Italic.ttf')     format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'PT Serif'; src: url('fonts/PTSerif-Bold.ttf')       format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'PT Serif'; src: url('fonts/PTSerif-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* ---------- Brand Colors ---------- */
  /* Primary — ink / foreground anchor */
  --bloom-ink:        #1B2126;   /* Primary brand color, photo bg */
  --bloom-ink-90:     #2c3238;
  --bloom-ink-70:     #4a5058;
  --bloom-ink-50:     #7a7f84;

  /* Secondary — accent palette (per PDF, page 5) */
  --bloom-flare:      #EC4C33;   /* Red-orange — primary accent / CTAs */
  --bloom-leaf:       #3EB54A;   /* Green — success, positive */
  --bloom-sky:        #2C8BCB;   /* Blue — links, info */

  /* Web neutrals (per PDF) */
  --bloom-paper:      #EEEEEE;   /* Light surface */
  --bloom-ash:        #C0C0C0;   /* Mid neutral / dividers */
  --bloom-slate:      #626567;   /* Secondary text */

  /* Derived tints + shades used across the system */
  --bloom-flare-hover:  #d33f28;
  --bloom-flare-soft:   #fde8e4;
  --bloom-leaf-soft:    #e4f4e6;
  --bloom-sky-soft:     #e0eef8;

  --bloom-white:      #FFFFFF;
  --bloom-black:      #000000;

  /* ---------- Semantic Foreground / Background ---------- */
  --fg-1: var(--bloom-ink);      /* Primary text */
  --fg-2: var(--bloom-slate);    /* Secondary text */
  --fg-3: #8a8d90;               /* Tertiary text */
  --fg-inverse: var(--bloom-white);

  --bg-1: var(--bloom-white);    /* Default surface */
  --bg-2: var(--bloom-paper);    /* Subtle surface */
  --bg-3: #f6f6f6;               /* Even subtler */
  --bg-inverse: var(--bloom-ink);/* Dark surface (photography bg) */

  --border-1: var(--bloom-ash);
  --border-2: #e4e4e4;

  /* ---------- Semantic Intent ---------- */
  --intent-primary:  var(--bloom-flare);
  --intent-success:  var(--bloom-leaf);
  --intent-info:     var(--bloom-sky);
  --intent-danger:   var(--bloom-ink);

  /* ---------- Typography ---------- */
  --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans:    'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif:   'PT Serif', Georgia, 'Times New Roman', serif;
  --font-body:    var(--font-serif);

  /* Type scale (px, tuned to PDF: H1 Poppins 28, Sub Poppins 14, Body PT Serif 10 → scaled up for web) */
  --fs-display:  64px;   /* Hero headlines */
  --fs-h1:       40px;
  --fs-h2:       32px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-subhead:  14px;   /* Eyebrow / kicker */
  --fs-body:     17px;   /* Web body (larger than print 10pt) */
  --fs-body-sm:  15px;
  --fs-caption:  13px;

  --lh-tight:   1.05;  /* @kind font */
  --lh-snug:    1.2;   /* @kind font */
  --lh-body:    1.55;  /* @kind font */
  --lh-loose:   1.7;   /* @kind font */

  --tracking-display: -0.02em;  /* @kind font */
  --tracking-heading: -0.01em;  /* @kind font */
  --tracking-subhead: 0.12em;   /* @kind font */
  --tracking-eyebrow: 0em;  /* @kind font */
  --tracking-body:    0em;      /* @kind font */

  --fw-light:    300;  /* @kind font */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semi:     600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */
  --fw-black:    800;  /* @kind font */

  /* ---------- Spacing (4pt grid) ---------- */
  --sp-0:  0;  /* @kind spacing */
  --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;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;   /* Buttons */
  --radius-md:   6px;
  --radius-card: 8px;   /* Info cards */
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(27, 33, 38, 0.06);
  --shadow-md:  0 4px 12px rgba(27, 33, 38, 0.08);
  --shadow-lg:  0 12px 32px rgba(27, 33, 38, 0.12);
  --shadow-xl:  0 24px 60px rgba(27, 33, 38, 0.18);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:    140ms;  /* @kind other */
  --dur-med:     240ms;  /* @kind other */
  --dur-slow:    400ms;  /* @kind other */

  /* ---------- Layout ---------- */
  --container-narrow: 760px;   /* @kind spacing */
  --container-med:    1040px;  /* @kind spacing */
  --container-wide:   1280px;  /* @kind spacing */
  --container-xwide:  1440px;  /* @kind spacing */
}

/* =========================================================
   Semantic typography
   ========================================================= */

.bloom-display,
.bloom h1.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-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.bloom h1, .bloom-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
  text-wrap: balance;
}

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

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

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

.bloom-subhead {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-subhead);
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-1);   /* Subheads are Ink on light surfaces — never an accent color */
}
/* … and white on dark surfaces */
.bloom-dark .bloom-subhead { color: #FFFFFF; }

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

.bloom-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.bloom-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-2);
}

/* Utility: UI labels (small caps style on sans) */
.bloom-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 13px;
  color: var(--fg-1);
}

/* Base reset for .bloom scope */
.bloom {
  font-family: var(--font-body);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   RULE — Accent colors are forbidden on Ink/black surfaces
   ---------------------------------------------------------
   Flare (red-orange), Leaf (green), and Sky (blue) are
   reserved for use on Paper or White surfaces. On dark
   surfaces (Ink #1B2126 or true black), emphasis must come
   from white, off-white, or weight changes — never from
   the accent palette.

   Add `bloom-dark` to any container that paints over Ink
   or black. Children that resolve color via the accent
   tokens are forced back to white inside that scope.
   Override per-instance only with `text-on-dark` on the
   element you intentionally want neutralized.
   ========================================================= */
.bloom-dark,
.bloom-dark * {
  /* re-map accent tokens to white inside dark scopes */
  --bloom-flare: #FFFFFF;
  --bloom-flare-hover: #FFFFFF;
  --bloom-leaf: #FFFFFF;
  --bloom-sky: #FFFFFF;
  --intent-primary: #FFFFFF;
  --intent-success: #FFFFFF;
  --intent-info: #FFFFFF;
}

/* Hard-stop guards for inline color usage on dark surfaces.
   Applied as a final pass — color values matched against the
   accent palette are forced to white. Keep selectors specific
   to .bloom-dark so light-surface usage is untouched. */
.bloom-dark [style*="#EC4C33"],
.bloom-dark [style*="#ec4c33"],
.bloom-dark [style*="#3EB54A"],
.bloom-dark [style*="#3eb54a"],
.bloom-dark [style*="#2C8BCB"],
.bloom-dark [style*="#2c8bcb"] {
  color: #FFFFFF !important;
}

/* Utility: declare an element's color is "on dark" — auto-white */
.text-on-dark { color: #FFFFFF !important; }
.text-on-dark-muted { color: rgba(255, 255, 255, 0.65) !important; }