/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║         CLICKFQ BRAND DESIGN SYSTEM  v2.0                   ║
 * ║         Single source of truth for all brand tokens         ║
 * ╚══════════════════════════════════════════════════════════════╝
 *
 * LOGO FILES
 *  Nav / header (light bg)  : /assets/logos/logo-wide.png    (646×200, transparent)
 *  Nav / header (dark bg)   : /assets/logos/logo-wide.png    (same — logo is on transparent)
 *  Footer                   : /assets/logos/logo-wide.png
 *  Favicon / small icon     : /assets/logos/logo-square.png  (500×500)
 *  OG / social share        : /assets/logos/logo-1280.png    (1280×720)
 *  Schema logo reference    : /logo.png                      (500×500)
 *
 * USAGE RULES
 *  • Always use <img> — never recreate the logo in CSS/text
 *  • Minimum clear space = logo height × 0.25 on all sides
 *  • On dark backgrounds: logo is already transparent — use directly
 *  • Never recolour, rotate, stretch, or add effects to the logo
 *  • Text fallback allowed only in schema JSON-LD (not visible UI)
 */

/* ══════════════════════════════════════════════════════════════
   BRAND COLOUR TOKENS
   Source of truth — every UI element reads from these variables
   ═════════════════════════════════════════════════════════════ */
:root {
  /* ── PRIMARY BRAND COLOURS (from logo) ──────────────────── */
  --cfq-blue:   #0389ff;   /* Primary CTA, links, active states      */
  --cfq-yellow: #f7e000;   /* Accent highlights, badges, warnings     */
  --cfq-green:  #2aa952;   /* Success, positive metrics, CTA alt      */
  --cfq-red:    #e8242c;   /* Error states, destructive, urgent alerts */

  /* ── BLUE SCALE ─────────────────────────────────────────── */
  --cfq-blue-50:  #e8f3ff;
  --cfq-blue-100: #bddcff;
  --cfq-blue-200: #8dc3ff;
  --cfq-blue-300: #5aa8ff;
  --cfq-blue-400: #2e93ff;
  --cfq-blue-500: #0389ff;   /* = --cfq-blue */
  --cfq-blue-600: #006fd4;
  --cfq-blue-700: #0056aa;
  --cfq-blue-800: #003d80;
  --cfq-blue-900: #002657;

  /* ── YELLOW SCALE ───────────────────────────────────────── */
  --cfq-yellow-50:  #fffde0;
  --cfq-yellow-100: #fff9a8;
  --cfq-yellow-200: #fff370;
  --cfq-yellow-300: #ffec38;
  --cfq-yellow-400: #ffe500;
  --cfq-yellow-500: #f7e000;  /* = --cfq-yellow */
  --cfq-yellow-600: #c9b700;
  --cfq-yellow-700: #9c8e00;
  --cfq-yellow-800: #6e6400;
  --cfq-yellow-900: #403a00;

  /* ── GREEN SCALE ────────────────────────────────────────── */
  --cfq-green-50:  #e8f7ed;
  --cfq-green-100: #c2eacd;
  --cfq-green-200: #93d9a9;
  --cfq-green-300: #60c882;
  --cfq-green-400: #3bba63;
  --cfq-green-500: #2aa952;  /* = --cfq-green */
  --cfq-green-600: #218f44;
  --cfq-green-700: #177535;
  --cfq-green-800: #0e5b27;
  --cfq-green-900: #06401a;

  /* ── RED SCALE ──────────────────────────────────────────── */
  --cfq-red-50:  #fde8e9;
  --cfq-red-100: #f9bfc1;
  --cfq-red-200: #f49497;
  --cfq-red-300: #ef676b;
  --cfq-red-400: #ec474c;
  --cfq-red-500: #e8242c;   /* = --cfq-red */
  --cfq-red-600: #c41920;
  --cfq-red-700: #9e1118;
  --cfq-red-800: #780b10;
  --cfq-red-900: #520508;

  /* ── DARK NAVY (primary dark surface — from logo background) */
  --cfq-navy-900: #0B1E38;
  --cfq-navy-800: #0f2747;
  --cfq-navy-700: #143257;
  --cfq-navy-600: #1a3e6a;
  --cfq-navy-500: #1e4b7e;

  /* ── NEUTRAL / GREY SCALE ───────────────────────────────── */
  --cfq-grey-50:  #F7F8FA;
  --cfq-grey-100: #EDF0F4;
  --cfq-grey-200: #E2E8F0;
  --cfq-grey-300: #CBD5E0;
  --cfq-grey-400: #A0AEC0;
  --cfq-grey-500: #718096;
  --cfq-grey-600: #4A5568;
  --cfq-grey-700: #2D3748;
  --cfq-grey-800: #1A202C;
  --cfq-grey-900: #0F1623;

  /* ── SEMANTIC ALIASES ───────────────────────────────────── */
  --cfq-bg:            var(--cfq-grey-50);
  --cfq-surface:       #ffffff;
  --cfq-border:        var(--cfq-grey-200);
  --cfq-border-light:  var(--cfq-grey-100);
  --cfq-text:          var(--cfq-grey-900);
  --cfq-text-muted:    var(--cfq-grey-500);
  --cfq-text-subtle:   var(--cfq-grey-400);
  --cfq-link:          var(--cfq-blue-500);
  --cfq-link-hover:    var(--cfq-blue-600);

  /* ── BUTTON TOKENS ──────────────────────────────────────── */
  --cfq-btn-primary-bg:      var(--cfq-blue-500);
  --cfq-btn-primary-hover:   var(--cfq-blue-600);
  --cfq-btn-primary-text:    #ffffff;

  --cfq-btn-secondary-bg:    var(--cfq-grey-100);
  --cfq-btn-secondary-hover: var(--cfq-grey-200);
  --cfq-btn-secondary-text:  var(--cfq-grey-800);

  --cfq-btn-green-bg:        var(--cfq-green-500);
  --cfq-btn-green-hover:     var(--cfq-green-600);
  --cfq-btn-green-text:      #ffffff;

  --cfq-btn-ghost-text:      var(--cfq-blue-500);
  --cfq-btn-ghost-hover-bg:  var(--cfq-blue-50);

  --cfq-btn-white-bg:        #ffffff;
  --cfq-btn-white-text:      var(--cfq-blue-500);
  --cfq-btn-white-hover:     var(--cfq-grey-50);

  /* ── BADGE TOKENS ───────────────────────────────────────── */
  --cfq-badge-blue-bg:    var(--cfq-blue-50);
  --cfq-badge-blue-text:  var(--cfq-blue-600);
  --cfq-badge-green-bg:   var(--cfq-green-50);
  --cfq-badge-green-text: var(--cfq-green-700);
  --cfq-badge-yellow-bg:  var(--cfq-yellow-50);
  --cfq-badge-yellow-text:var(--cfq-yellow-800);
  --cfq-badge-red-bg:     var(--cfq-red-50);
  --cfq-badge-red-text:   var(--cfq-red-600);
  --cfq-badge-grey-bg:    var(--cfq-grey-100);
  --cfq-badge-grey-text:  var(--cfq-grey-600);

  /* ── SHADOW TOKENS ──────────────────────────────────────── */
  --cfq-shadow-xs:  0 1px 2px rgba(3,137,255,0.04);
  --cfq-shadow-sm:  0 2px 8px rgba(3,137,255,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --cfq-shadow-md:  0 4px 16px rgba(3,137,255,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --cfq-shadow-lg:  0 8px 32px rgba(3,137,255,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --cfq-shadow-xl:  0 16px 64px rgba(3,137,255,0.12), 0 8px 16px rgba(0,0,0,0.08);
  --cfq-shadow-nav: 0 2px 12px rgba(0,0,0,0.06);

  /* ── RADIUS TOKENS ──────────────────────────────────────── */
  --cfq-radius-sm:  6px;
  --cfq-radius-md:  10px;
  --cfq-radius-lg:  14px;
  --cfq-radius-xl:  20px;
  --cfq-radius-pill: 999px;

  /* ── SPACING ────────────────────────────────────────────── */
  --cfq-nav-h:  64px;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL RESETS & BASE
   ═════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════
   LOGO COMPONENT  — .cfq-logo
   Usage:
     <a href="/" class="cfq-logo cfq-logo--nav">
       <img src="/assets/logos/logo-wide.png" alt="ClickFq Venture Labs"/>
     </a>
   ═════════════════════════════════════════════════════════════ */
.cfq-logo { display: inline-flex; align-items: center; text-decoration: none; }
.cfq-logo img { display: block; object-fit: contain; }
.cfq-logo--nav   img { height: 34px; width: auto; }
.cfq-logo--sm    img { height: 24px; width: auto; }
.cfq-logo--md    img { height: 40px; width: auto; }
.cfq-logo--lg    img { height: 56px; width: auto; }
.cfq-logo--hero  img { height: 48px; width: auto; }
.cfq-logo--footer img { height: 36px; width: auto; }
.cfq-logo--icon  img { height: 32px; width: 32px; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════
   NAV  — .cfq-nav
   ═════════════════════════════════════════════════════════════ */
.cfq-nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--cfq-nav-h);
  background: var(--cfq-surface);
  border-bottom: 1px solid var(--cfq-border);
  box-shadow: var(--cfq-shadow-nav);
  display: flex; align-items: center;
  padding: 0 40px; gap: 32px;
}
.cfq-nav__links { display: flex; gap: 24px; }
.cfq-nav__link {
  font-size: 13px; font-weight: 600;
  color: var(--cfq-grey-600);
  text-decoration: none;
  transition: color 0.15s;
}
.cfq-nav__link:hover { color: var(--cfq-blue); }
.cfq-nav__link--active { color: var(--cfq-blue); }
@media(max-width: 768px) {
  .cfq-nav { padding: 0 20px; }
  .cfq-nav__links { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER  — .cfq-footer
   ═════════════════════════════════════════════════════════════ */
.cfq-footer {
  background: var(--cfq-navy-900);
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}
.cfq-footer a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.15s; }
.cfq-footer a:hover { color: #fff; }
.cfq-footer__inner { max-width: 1100px; margin: 0 auto; padding: 48px 40px 32px; }
.cfq-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.cfq-footer__brand-desc { font-size: 12px; line-height: 1.65; margin-top: 14px; color: rgba(255,255,255,0.45); max-width: 240px; }
.cfq-footer__col-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 14px; }
.cfq-footer__col-links { display: flex; flex-direction: column; gap: 9px; }
.cfq-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.cfq-footer__legal-links { display: flex; gap: 20px; }
@media(max-width: 768px) {
  .cfq-footer__top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cfq-footer__inner { padding: 36px 20px 24px; }
}
@media(max-width: 480px) {
  .cfq-footer__top { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — .cfq-btn
   ═════════════════════════════════════════════════════════════ */
.cfq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; cursor: pointer; text-decoration: none;
  font-family: inherit; font-weight: 700; border-radius: var(--cfq-radius-md);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
}
.cfq-btn:active { transform: translateY(1px); }

/* Sizes */
.cfq-btn--sm  { height: 34px; padding: 0 14px; font-size: 12px; }
.cfq-btn--md  { height: 40px; padding: 0 18px; font-size: 13px; }
.cfq-btn--lg  { height: 48px; padding: 0 24px; font-size: 14px; }
.cfq-btn--xl  { height: 56px; padding: 0 32px; font-size: 15px; }

/* Variants */
.cfq-btn--primary {
  background: var(--cfq-btn-primary-bg);
  color: var(--cfq-btn-primary-text);
}
.cfq-btn--primary:hover { background: var(--cfq-btn-primary-hover); box-shadow: var(--cfq-shadow-md); }

.cfq-btn--green {
  background: var(--cfq-btn-green-bg);
  color: var(--cfq-btn-green-text);
}
.cfq-btn--green:hover { background: var(--cfq-btn-green-hover); box-shadow: var(--cfq-shadow-md); }

.cfq-btn--secondary {
  background: var(--cfq-btn-secondary-bg);
  color: var(--cfq-btn-secondary-text);
}
.cfq-btn--secondary:hover { background: var(--cfq-btn-secondary-hover); }

.cfq-btn--ghost {
  background: transparent;
  color: var(--cfq-btn-ghost-text);
}
.cfq-btn--ghost:hover { background: var(--cfq-btn-ghost-hover-bg); }

.cfq-btn--white {
  background: var(--cfq-btn-white-bg);
  color: var(--cfq-btn-white-text);
}
.cfq-btn--white:hover { background: var(--cfq-btn-white-hover); }

.cfq-btn--outline-white {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
}
.cfq-btn--outline-white:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.cfq-btn--danger {
  background: var(--cfq-red-500);
  color: #fff;
}
.cfq-btn--danger:hover { background: var(--cfq-red-600); }

/* ══════════════════════════════════════════════════════════════
   BADGES — .cfq-badge
   ═════════════════════════════════════════════════════════════ */
.cfq-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--cfq-radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.cfq-badge--blue   { background: var(--cfq-badge-blue-bg);   color: var(--cfq-badge-blue-text); }
.cfq-badge--green  { background: var(--cfq-badge-green-bg);  color: var(--cfq-badge-green-text); }
.cfq-badge--yellow { background: var(--cfq-badge-yellow-bg); color: var(--cfq-badge-yellow-text); }
.cfq-badge--red    { background: var(--cfq-badge-red-bg);    color: var(--cfq-badge-red-text); }
.cfq-badge--grey   { background: var(--cfq-badge-grey-bg);   color: var(--cfq-badge-grey-text); }
.cfq-badge--navy   { background: rgba(3,137,255,0.15); color: #60b8ff; } /* for dark surfaces */

/* ══════════════════════════════════════════════════════════════
   CARDS — .cfq-card
   ═════════════════════════════════════════════════════════════ */
.cfq-card {
  background: var(--cfq-surface);
  border: 1px solid var(--cfq-border);
  border-radius: var(--cfq-radius-lg);
  box-shadow: var(--cfq-shadow-sm);
}
.cfq-card--hover { transition: box-shadow 0.2s, transform 0.2s; }
.cfq-card--hover:hover { box-shadow: var(--cfq-shadow-lg); transform: translateY(-2px); }
.cfq-card--highlight { border-color: var(--cfq-blue-200); box-shadow: 0 0 0 3px var(--cfq-blue-50), var(--cfq-shadow-sm); }

/* ══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═════════════════════════════════════════════════════════════ */
.cfq-input, .cfq-select, .cfq-textarea {
  width: 100%;
  border: 1.5px solid var(--cfq-border);
  border-radius: var(--cfq-radius-md);
  padding: 0 13px;
  height: 44px;
  font-size: 13px;
  font-family: inherit;
  color: var(--cfq-text);
  background: var(--cfq-surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cfq-input:focus, .cfq-select:focus, .cfq-textarea:focus {
  border-color: var(--cfq-blue);
  box-shadow: 0 0 0 3px var(--cfq-blue-50);
}
.cfq-textarea { height: auto; padding: 12px 13px; resize: vertical; }
.cfq-label { font-size: 11px; font-weight: 700; color: var(--cfq-grey-600); letter-spacing: .05em; text-transform: uppercase; display: block; margin-bottom: 5px; }

/* ══════════════════════════════════════════════════════════════
   HERO SECTIONS — dark navy gradient
   ═════════════════════════════════════════════════════════════ */
.cfq-hero {
  background: linear-gradient(135deg, var(--cfq-navy-900) 0%, var(--cfq-navy-700) 60%, #0f2547 100%);
  position: relative; overflow: hidden;
}
.cfq-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(3,137,255,0.12), transparent);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   STAT / METRIC COMPONENTS
   ═════════════════════════════════════════════════════════════ */
.cfq-stat-val { font-weight: 900; font-size: 28px; color: var(--cfq-grey-900); line-height: 1; }
.cfq-stat-lbl { font-size: 11px; font-weight: 600; color: var(--cfq-grey-500); margin-top: 4px; }
.cfq-stat-val--white { color: #fff; }
.cfq-stat-val--blue  { color: var(--cfq-blue); }
.cfq-stat-val--green { color: var(--cfq-green); }

/* ══════════════════════════════════════════════════════════════
   TOAST / ALERT
   ═════════════════════════════════════════════════════════════ */
.cfq-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-radius: var(--cfq-radius-md);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--cfq-shadow-lg);
}
.cfq-toast--success { background: var(--cfq-green-500); color: #fff; }
.cfq-toast--error   { background: var(--cfq-red-500);   color: #fff; }
.cfq-toast--warning { background: var(--cfq-yellow-500); color: var(--cfq-grey-900); }
.cfq-toast--info    { background: var(--cfq-blue-500);   color: #fff; }

/* ══════════════════════════════════════════════════════════════
   BREADCRUMB
   ═════════════════════════════════════════════════════════════ */
.cfq-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: var(--cfq-grey-500);
  padding: 14px 0;
  list-style: none;
}
.cfq-breadcrumb a { color: var(--cfq-grey-500); text-decoration: none; }
.cfq-breadcrumb a:hover { color: var(--cfq-blue); }
.cfq-breadcrumb__sep { color: var(--cfq-grey-300); }
.cfq-breadcrumb__current { color: var(--cfq-grey-800); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   SECTION EYEBROW / LABEL
   ═════════════════════════════════════════════════════════════ */
.cfq-eyebrow {
  font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cfq-blue);
}
.cfq-eyebrow--green  { color: var(--cfq-green); }
.cfq-eyebrow--yellow { color: var(--cfq-yellow-700); }
.cfq-eyebrow--white  { color: rgba(255,255,255,0.6); }

/* ══════════════════════════════════════════════════════════════
   UTILITIES
   ═════════════════════════════════════════════════════════════ */
.cfq-text-blue   { color: var(--cfq-blue); }
.cfq-text-green  { color: var(--cfq-green); }
.cfq-text-yellow { color: var(--cfq-yellow-600); }
.cfq-text-red    { color: var(--cfq-red); }
.cfq-text-muted  { color: var(--cfq-text-muted); }
.cfq-bg-blue-light   { background: var(--cfq-blue-50); }
.cfq-bg-green-light  { background: var(--cfq-green-50); }
.cfq-bg-yellow-light { background: var(--cfq-yellow-50); }
.cfq-bg-red-light    { background: var(--cfq-red-50); }
.cfq-divider { height: 1px; background: var(--cfq-border); border: none; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   LEGACY OVERRIDES
   Map old hardcoded colours to brand tokens across existing pages
   ═════════════════════════════════════════════════════════════ */

/* Old text logos → replaced by img below, but keep colour correct for fallbacks */
.nav-logo, .nav-logo span,
a.nav-logo { color: var(--cfq-blue); text-decoration: none; }

/* Old button colours → normalise to brand tokens */
.btn-pri, .btn-primary         { background: var(--cfq-blue) !important; color: #fff !important; }
.btn-grn, .btn-green           { background: var(--cfq-green) !important; color: #fff !important; }
.btn-red, .btn-danger          { background: var(--cfq-red) !important; color: #fff !important; }

/* Old hardcoded #00B894 green → replace with brand green */
/* (applies to any inline style we can't patch easily) */
[style*="color:#00B894"]   { color: var(--cfq-green) !important; }
[style*="color: #00B894"]  { color: var(--cfq-green) !important; }
[style*="background:#00B894"] { background: var(--cfq-green) !important; }

/* Ensure hero gradient uses brand navy */
[style*="#0B1E38"], [style*="#0F2540"] { /* keep — matches brand */ }