/* ============================================================================
   Gulf Coast Brand Builders — Brand Tokens
   The single source of truth for the GCBB brand system. Both arms of the site
   (SMB / GoHighLevel and AIOS / AI agency) render from this one file.

   Palette locked by Jess (approved on the Collingwood proposal, derived from the
   logo mark). Do not re-derive colors elsewhere; import or copy this file.

   Usage:
     <link rel="stylesheet" href="brand-tokens.css">
     Section-level lean: add class "arm-smb" or "arm-aios" to a <section>
     to switch --arm-grad / --arm-accent for that block. Everything else
     (Ink headings, Slate body, gradient, cards, buttons) stays shared.
   ============================================================================ */

:root {
  /* --- Core palette (LOCKED) --------------------------------------------- */
  --blue:   #0090d0;  /* primary, gradient start */
  --cyan:   #00b0e8;  /* primary bright, gradient mid */
  --teal:   #00b8c0;  /* gradient end */
  --indigo: #4038b8;  /* accent — the node in the mark, high-tech emphasis */
  --ink:    #0b1220;  /* near-black headings + dark sections */
  --slate:  #475569;  /* body text */
  --line:   #e6ebf1;  /* borders / hairlines */
  --soft:   #f6f9fc;  /* alt section background */
  --white:  #ffffff;  /* ground */

  /* Tints / supports (derived, safe to use) */
  --ink-2:   #131c2e;  /* raised surface on dark */
  --ink-line:#26334a;  /* border on dark */
  --slate-2: #9fb2c6;  /* muted text on dark */
  --slate-3: #c7d3e0;  /* body text on dark */
  --blue-50: #eef7fc;  /* faint blue wash */
  --indigo-50:#eeedfa; /* faint indigo wash */

  /* --- Signature gradients ------------------------------------------------ */
  --grad:   linear-gradient(120deg, var(--blue), var(--cyan) 55%, var(--teal));   /* brand / SMB lean */
  --grad-i: linear-gradient(120deg, var(--indigo), var(--blue));                  /* accent / AIOS lean */
  --grad-soft: linear-gradient(120deg, #eaf6fc, #f0f9fa);                          /* pale wash */

  /* --- Two-arm accent leans (default = shared brand) ---------------------- */
  --arm-grad:   var(--grad);   /* overridden by .arm-smb / .arm-aios */
  --arm-accent: var(--blue);

  /* --- Typography --------------------------------------------------------- */
  /* Display matches the wordmark (geometric sans). Confirm against Canva kit
     kAGhKmpG6DA — if it names a different display face, swap this one line. */
  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: .78rem;
  --fs-body:    1.05rem;
  --fs-lead:    1.18rem;
  --fs-h3:      1.2rem;
  --fs-h2:      clamp(1.55rem, 3.4vw, 2.2rem);
  --fs-h1:      clamp(2.1rem, 5.4vw, 3.4rem);
  --tracking-tight: -.02em;
  --tracking-eyebrow: .14em;

  /* --- Spacing / layout --------------------------------------------------- */
  --wrap:      1080px;   /* content max-width for the marketing site */
  --wrap-tight: 940px;   /* proposal / reading width */
  --pad-x:     24px;
  --section-y: 72px;

  /* --- Radius ------------------------------------------------------------- */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* --- Shadows / rings ---------------------------------------------------- */
  --shadow-sm: 0 2px 8px -4px rgba(11,18,32,.15);
  --shadow:    0 12px 32px -16px rgba(11,18,32,.28);
  --shadow-cta:0 10px 24px -8px rgba(0,144,208,.55);
  --shadow-cta-i: 0 10px 24px -8px rgba(64,56,184,.5);
}

/* Section leans — set the arm accent for a block without breaking the brand */
.arm-smb  { --arm-grad: var(--grad);   --arm-accent: var(--blue);   }
.arm-aios { --arm-grad: var(--grad-i); --arm-accent: var(--indigo); }

/* ============================================================================
   Optional shared primitives — copy the ones a page needs, or link this file.
   Namespaced under nothing on purpose so they read like the Collingwood CSS.
   ============================================================================ */

.gcbb-gradient-text {
  background: var(--arm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gcbb-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  background: var(--arm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gcbb-btn {
  display: inline-block;
  font-family: var(--font-display);
  background: var(--arm-grad);
  color: #fff;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--r);
  text-decoration: none;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform .15s ease;
}
.arm-aios .gcbb-btn { box-shadow: var(--shadow-cta-i); }
.gcbb-btn:hover { transform: translateY(-2px); }
.gcbb-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.gcbb-btn-ghost {
  display: inline-block;
  font-family: var(--font-display);
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--r);
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.gcbb-btn-ghost:hover { transform: translateY(-2px); border-color: #c7d8ea; }

.gcbb-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}

/* Gradient-ring card (the selected/emphasis state from the proposal) */
.gcbb-card-ring {
  border: 1.5px solid transparent;
  border-radius: var(--r-lg);
  background: linear-gradient(#fff, #fff) padding-box, var(--arm-grad) border-box;
  padding: 22px;
}