/* ===========================================================
   Open Elements — single source of truth for color & type.
   Import this on every page: <link rel="stylesheet" href="…/colors_and_type.css">

   Revised from observation of Open Elements' own marketing
   materials (pitch deck, flyers, whitepaper). See README § Sources.
   =========================================================== */

/* Display: Montserrat Thin/ExtraLight/Light — drives all big headlines.
   Body:    Lato — reads at any size; heavier weights for emphasis.
   Mono:    Source Code Pro — for code blocks, file paths, terminal output.
   Decoration: Permanent Marker — for handwritten quote attributions only. */

@font-face { font-family: 'Montserrat'; font-weight: 100; font-style: normal; font-display: swap; src: url('fonts/Montserrat-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 200; font-style: normal; font-display: swap; src: url('fonts/Montserrat-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/Montserrat-Light.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 300; font-style: italic; font-display: swap; src: url('fonts/Montserrat-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/Montserrat-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Montserrat-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/Montserrat-BoldItalic.ttf') format('truetype'); }

@font-face { font-family: 'Lato'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/Lato-Light.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Lato-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/Lato-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Lato-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/Lato-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Lato-Black.ttf') format('truetype'); }

@font-face { font-family: 'Source Code Pro'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/SourceCodePro-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Source Code Pro'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/SourceCodePro-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Source Code Pro'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/SourceCodePro-Bold.ttf') format('truetype'); }

@font-face { font-family: 'Permanent Marker'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/PermanentMarker-Regular.ttf') format('truetype'); }

:root {
  /* ----- Core ink ----- */
  --navy-900:  #001452;        /* primary ink, logo, headlines */
  --navy-700:  #182A6B;        /* secondary navy — diagram fills */
  --navy-500:  #3A559A;        /* mid navy tile fills */

  /* ----- Blues (the system's true primary color family) ----- */
  --blue-600:  #4A87D6;        /* mid blue tiles (deck p9 top-right) */
  --blue-500:  #6EA6E3;        /* standard blue */
  --blue-300:  #9EC5EC;        /* lighter blue tile */
  --blue-200:  #C5DEF3;        /* pale blue */
  --blue-100:  #E5EFF9;        /* page-tinted blue (deck "Hiero" bg) */
  --blue-050:  #F2F7FC;        /* whisper blue */

  /* ----- Teal / Mint (secondary — illustrations, mint pages) ----- */
  --teal-600:  #28A58A;        /* deep teal in illustrations */
  --teal-500:  #5CBA9E;        /* brand teal — logo ring, small shapes */
  --teal-300:  #A8DAC8;        /* mid mint tile */
  --mint-200:  #C9E4D9;        /* mint tile fill */
  --mint-100:  #E2F0EA;        /* mint-page background (deck "Risk" slide) */

  /* ----- Accents (used sparingly) ----- */
  --pink-500:  #E6357B;        /* logo stripe, mid-sentence emphasis, Digital Trust nodes */
  --pink-200:  #F7C6D9;
  --yellow-400:#F5C836;        /* logo stripe — rarely used outside the mark */

  /* ----- Surfaces ----- */
  --bg:        #FFFFFF;        /* default page */
  --bg-soft:   #F7F9FC;        /* a hair warmer than white */
  --surface:   #FFFFFF;
  --ink:       var(--navy-900);
  --ink-muted: #001452B3;      /* 70% navy — body copy on light */
  --ink-faint: #00145266;      /* 40% navy — captions, meta */
  --ink-line:  #0014521F;      /* 12% navy — hairlines */

  /* ----- Spacing — 4px base ----- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ----- Radii (conservative — the brand uses gentle rounding, not pill cards) ----- */
  --r-chip: 4px;
  --r-ctrl: 6px;
  --r-tile: 10px;       /* the dominant card corner in the decks */
  --r-card: 14px;
  --r-hero: 20px;
  --r-pill: 9999px;

  /* ----- Shadows — barely there. Brand leans on color, not shadow. ----- */
  --shadow-none:  none;
  --shadow-soft:  0 2px 12px -4px rgba(0, 20, 82, 0.08);
  --shadow-tile:  0 1px 2px rgba(0, 20, 82, 0.06);

  /* ----- Type ----- */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Lato', system-ui, sans-serif;
  --font-mono:    'Source Code Pro', ui-monospace, monospace;
  --font-hand:    'Permanent Marker', cursive;   /* for pull-quote attributions ONLY */

  /* Display scale — drives hero & section headers.
     ALL display sizes are weight 200-300 (ExtraLight/Light).
     NEVER set a display headline to Bold — that is off-brand.
     Emphasis inside a headline uses weight 500-600 on a single phrase. */
  --fs-hero:    88px; --lh-hero:    92px;  --fw-hero:    300;   /* cover slides, hero heroes */
  --fs-display: 64px; --lh-display: 72px;  --fw-display: 300;   /* section titles, deck titles */
  --fs-h1:      44px; --lh-h1:      52px;  --fw-h1:      300;   /* page H1 */
  --fs-h2:      30px; --lh-h2:      38px;  --fw-h2:      400;
  --fs-h3:      22px; --lh-h3:      30px;  --fw-h3:      600;
  --fs-h4:      18px; --lh-h4:      26px;  --fw-h4:      700;

  /* Body scale — Lato. Default regular; bold for emphasis. */
  --fs-lead: 20px;  --lh-lead: 32px;  --fw-lead: 400;
  --fs-body: 16px;  --lh-body: 26px;  --fw-body: 400;
  --fs-sm:   14px;  --lh-sm:   22px;  --fw-sm:   400;
  --fs-cap:  12px;  --lh-cap:  16px;  --fw-cap:  700;   /* ALL-CAPS labels on stat tiles */
}

/* ===========================================================
   Base
   =========================================================== */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { font-size: var(--fs-body); line-height: var(--lh-body); }

/* Display family handles all h1–h2; body family handles h3–h4 and prose */
h1, h2 { font-family: var(--font-display); margin: 0; color: var(--ink); letter-spacing: -0.02em; }
h3, h4 { font-family: var(--font-body);    margin: 0; color: var(--ink); letter-spacing: -0.005em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); }
p  { margin: 0; }

/* Display utilities — use on marketing surfaces, not standard h1 */
.t-hero    { font-family: var(--font-display); font-size: var(--fs-hero);    line-height: var(--lh-hero);    font-weight: var(--fw-hero);    letter-spacing: -0.025em; }
.t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); letter-spacing: -0.02em; }
.t-lead    { font-family: var(--font-body);    font-size: var(--fs-lead);    line-height: var(--lh-lead);    font-weight: var(--fw-lead); }

/* The signature mid-sentence emphasis.
   <h1 class="t-display">Open Source — <em class="emph">done right.</em></h1> */
.emph { font-style: normal; font-weight: 700; }

/* Monochrome caption label used on stat tiles */
.cap-label {
  font-family: var(--font-body);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  font-weight: var(--fw-cap);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===========================================================
   The signature "—" eyebrow rule.
   Usage: <div class="section-rule">Section title</div>
   A navy 2px bar on the left, then the title in navy.
   =========================================================== */
.section-rule {
  display: flex; align-items: center; gap: 24px;
  font-family: var(--font-display);
  font-size: var(--fs-display); line-height: var(--lh-display);
  font-weight: var(--fw-display);
  color: var(--navy-900);
  letter-spacing: -0.02em;
}
.section-rule::before {
  content: "";
  flex: 0 0 80px;
  height: 2px;
  background: var(--navy-900);
}

/* ===========================================================
   Buttons — simple, flat, navy-first.
   =========================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  border: 0; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn--primary    { background: var(--navy-900); color: #fff; }
.btn--primary:hover { background: var(--navy-700); }
.btn--accent     { background: var(--pink-500); color: #fff; }
.btn--accent:hover { background: #c42466; }
.btn--success    { background: var(--teal-600); color: #fff; }
.btn--success:hover { background: #1f8a72; }
.btn--ghost      { background: transparent; color: var(--navy-900); border: 1.5px solid var(--navy-900); }
.btn--ghost:hover { background: var(--navy-900); color: #fff; }
.btn--sm         { padding: 9px 16px; font-size: 13px; border-radius: 10px; }

/* ===========================================================
   Tags & pills — transparent bg, colored outline.
   =========================================================== */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  border: 1.5px solid var(--ink-line);
  color: var(--navy-900);
  background: transparent;
}
.tag--filled { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.tag--mint   { background: var(--mint-100); color: var(--teal-600); border-color: var(--teal-300); }
.tag--blue   { background: var(--blue-100); color: var(--navy-700); border-color: var(--blue-300); }

/* ===========================================================
   Tiles & cards — the deck's primary information unit.
   A tile has a flat fill color and gentle 10px corners.
   =========================================================== */
.tile {
  border-radius: var(--r-tile);
  padding: 24px;
  color: var(--navy-900);
}
.tile--mint  { background: var(--mint-200); }
.tile--blue  { background: var(--blue-300); }
.tile--deep  { background: var(--navy-500); color: #fff; }
.tile--pale  { background: var(--blue-100); }
.tile--white { background: #fff; border: 1px solid var(--ink-line); }

/* Stat tile — big number, small caption below. */
.stat {
  display: flex; flex-direction: column; justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 24px;
  border-radius: var(--r-tile);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat__cap {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: currentColor;
  opacity: .9;
}

/* ===========================================================
   Inputs
   =========================================================== */
.input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-ctrl);
  font-family: var(--font-body); font-size: 15px;
  background: #fff; color: var(--ink);
  outline: none; transition: border-color .15s ease;
}
.input:focus       { border-color: var(--navy-900); }
.input::placeholder{ color: var(--ink-faint); }

/* ===========================================================
   Utility — the soft-page backgrounds seen in the deck.
   Use as full-section or card backgrounds to vary rhythm.
   =========================================================== */
.bg-page-white { background: #FFFFFF; }
.bg-page-blue  { background: var(--blue-100); }
.bg-page-mint  { background: var(--mint-100); }
.bg-page-pale  { background: var(--bg-soft); }
.bg-page-navy  { background: var(--navy-900); color: #fff; }