/*
 * CFM (CyberForge Media) Design System
 * Source-of-truth for any LP, deck, onboard form, or microsite that should
 * render in CFM's brand identity.
 *
 * Hosted at: https://go.deeurl.com/cfm-internal/design-system.css
 * Usage:     <link rel="stylesheet" href="https://go.deeurl.com/cfm-internal/design-system.css">
 *
 * Colors VERIFIED 2026-05-04 against CyberForge-Guidelines.pdf.
 * Typography: Brown LL (Lineto). Self-hosted WOFF, served from same origin.
 *
 * Note: guidelines document Alert Yellow as "FF0000" (red) but the swatch
 * itself is unambiguously yellow. Using #FFFF00 to match intent + visual +
 * the actual ad creatives. Flagged with Hugh/Peter so the source PDF can
 * be corrected.
 */

/* ============================================================
   FONTS — Brown LL family (web subset: Thin, Light, Regular, Bold + italics)
   Note: OTF kit has Black + Medium weights; WOFF subset doesn't.
   Fall back to Bold for Black, Regular for Medium when needed.
   ============================================================ */

@font-face {
  font-family: 'Brown LL';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('https://go.deeurl.com/cfm-internal/fonts/lineto-brown-thin.woff') format('woff');
}
@font-face {
  font-family: 'Brown LL';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('https://go.deeurl.com/cfm-internal/fonts/lineto-brown-light.woff') format('woff');
}
@font-face {
  font-family: 'Brown LL';
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url('https://go.deeurl.com/cfm-internal/fonts/lineto-brown-lightItalic.woff') format('woff');
}
@font-face {
  font-family: 'Brown LL';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('https://go.deeurl.com/cfm-internal/fonts/lineto-brown-regular.woff') format('woff');
}
@font-face {
  font-family: 'Brown LL';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('https://go.deeurl.com/cfm-internal/fonts/lineto-brown-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Brown LL';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('https://go.deeurl.com/cfm-internal/fonts/lineto-brown-bold.woff') format('woff');
}
@font-face {
  font-family: 'Brown LL';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('https://go.deeurl.com/cfm-internal/fonts/lineto-brown-boldItalic.woff') format('woff');
}

/* ============================================================
   OFFICIAL COLOR TOKENS — verified from CyberForge-Guidelines.pdf
   ============================================================ */
:root {
  /* Typography */
  --cfm-font-sans: 'Brown LL', system-ui, -apple-system, sans-serif;

  /* Brand colors — official names + hex */
  --cfm-core-blue:     #0000FF;  /* Primary — boldest brand statement */
  --cfm-signal-cyan:   #0FFFFF;  /* Pairs with Core Blue (Cat-Mark uses this) */
  --cfm-alert-yellow:  #FFFF00;  /* (guidelines say FF0000 — typo, intent is yellow) */
  --cfm-pulse-magenta: #FF00FF;  /* Used in outline mark variants */
  --cfm-cloud-white:   #F9F9F9;  /* Light bg / off-white surface */
  --cfm-carbon-black:  #1B1B1B;  /* Dark text / dark bg */

  /* Semantic aliases (use these in components when possible) */
  --cfm-bg:            var(--cfm-cloud-white);
  --cfm-bg-dark:       var(--cfm-carbon-black);
  --cfm-text:          var(--cfm-carbon-black);
  --cfm-text-on-dark:  var(--cfm-cloud-white);
  --cfm-cta:           var(--cfm-core-blue);
  --cfm-cta-text:      var(--cfm-cloud-white);
  --cfm-accent:        var(--cfm-signal-cyan);
  --cfm-warn:          var(--cfm-alert-yellow);
  --cfm-pop:           var(--cfm-pulse-magenta);

  /* Spacing (8px grid) */
  --cfm-space-1: 8px;
  --cfm-space-2: 16px;
  --cfm-space-3: 24px;
  --cfm-space-4: 32px;
  --cfm-space-6: 48px;
  --cfm-space-8: 64px;
  --cfm-space-12: 96px;

  /* Radius */
  --cfm-radius-sm: 4px;
  --cfm-radius: 8px;
  --cfm-radius-lg: 16px;
  --cfm-radius-pill: 999px;
}

/* ============================================================
   BASE
   ============================================================ */
.cfm-theme {
  font-family: var(--cfm-font-sans);
  background: var(--cfm-bg);
  color: var(--cfm-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.cfm-theme h1, .cfm-theme h2, .cfm-theme h3, .cfm-theme h4 {
  font-family: var(--cfm-font-sans);
  font-weight: 700;            /* Headline = LL Brown Bold per guidelines */
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 var(--cfm-space-2);
}

.cfm-theme p, .cfm-theme li {
  font-family: var(--cfm-font-sans);
  font-weight: 400;            /* Body = LL Brown Regular per guidelines */
}

.cfm-theme a {
  color: var(--cfm-core-blue);
  text-decoration: none;
}
.cfm-theme a:hover { text-decoration: underline; }

/* ============================================================
   THEME PRESETS — the 4 official color combinations from guidelines
   Apply ONE of these classes alongside .cfm-theme on the body or a wrapper.
   ============================================================ */

/* 1 — Cyan canvas + Blue ink (energetic, primary marketing) */
.cfm-theme.cfm-on-cyan {
  background: var(--cfm-signal-cyan);
  color: var(--cfm-core-blue);
}
.cfm-theme.cfm-on-cyan a { color: var(--cfm-core-blue); }

/* 2 — Yellow canvas + Black ink (high-attention, alerts/CTAs) */
.cfm-theme.cfm-on-yellow {
  background: var(--cfm-alert-yellow);
  color: var(--cfm-carbon-black);
}
.cfm-theme.cfm-on-yellow a { color: var(--cfm-carbon-black); text-decoration: underline; }

/* 3 — White canvas + Black ink (default editorial / docs) */
.cfm-theme.cfm-on-white {
  background: var(--cfm-cloud-white);
  color: var(--cfm-carbon-black);
}

/* 4 — Blue canvas + Cyan ink (hero / impact) */
.cfm-theme.cfm-on-blue {
  background: var(--cfm-core-blue);
  color: var(--cfm-signal-cyan);
}
.cfm-theme.cfm-on-blue h1,
.cfm-theme.cfm-on-blue h2,
.cfm-theme.cfm-on-blue h3 { color: var(--cfm-signal-cyan); }
.cfm-theme.cfm-on-blue a { color: var(--cfm-signal-cyan); }

/* ============================================================
   COMPONENTS
   ============================================================ */
.cfm-cta {
  display: inline-block;
  background: var(--cfm-cta);
  color: var(--cfm-cta-text);
  font-family: var(--cfm-font-sans);
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--cfm-radius-pill);
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
  border: 0;
  cursor: pointer;
}
.cfm-cta:hover { transform: translateY(-1px); background: var(--cfm-carbon-black); text-decoration: none; }

.cfm-cta--cyan {
  background: var(--cfm-signal-cyan);
  color: var(--cfm-core-blue);
}
.cfm-cta--cyan:hover { background: var(--cfm-core-blue); color: var(--cfm-signal-cyan); }

.cfm-cta--yellow {
  background: var(--cfm-alert-yellow);
  color: var(--cfm-carbon-black);
}
.cfm-cta--yellow:hover { background: var(--cfm-carbon-black); color: var(--cfm-alert-yellow); }

.cfm-card {
  background: var(--cfm-cloud-white);
  color: var(--cfm-carbon-black);
  border-radius: var(--cfm-radius-lg);
  padding: var(--cfm-space-4);
  border: 1px solid rgba(27,27,27,0.08);
}
.cfm-on-blue .cfm-card,
.cfm-on-cyan .cfm-card {
  border-color: rgba(27,27,27,0.12);
}

.cfm-badge {
  display: inline-block;
  background: var(--cfm-signal-cyan);
  color: var(--cfm-core-blue);
  font-family: var(--cfm-font-sans);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--cfm-radius-pill);
}
.cfm-badge--yellow {
  background: var(--cfm-alert-yellow);
  color: var(--cfm-carbon-black);
}
.cfm-badge--magenta {
  background: var(--cfm-pulse-magenta);
  color: var(--cfm-cloud-white);
}