/* ===========================================================
   Maverick Marketing & Web — Design Tokens
   Extracted from maverickweb.co.za, Aug 2026
   Companion to CLAUDE.md. Import before any component CSS.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;700&family=Poppins:wght@400;500;600&display=swap');

:root {
  /* --- Brand ------------------------------------------------ */
  --mv-pink:            #BE1E6E;   /* master value: logo SVG + signature generator */
  --mv-pink-hover:      #A01860;   /* verified: signature generator .copy-btn:hover */
  --mv-pink-light:      #E8538A;   /* gradient mid-stop only - fails AA as text */
  --mv-pink-tint:       #FDF0F5;   /* ghost/secondary hover ground */
  --mv-pink-tint-2:     #F5F0F3;   /* segmented-control active ground */

  /* --- Ink & text ------------------------------------------- */
  --mv-ink-navy:        #1D1D32;   /* HEADINGS - the brand's true heading colour */
  --mv-black:           #000000;
  --mv-ink:             #0E0E0E;   /* dark section ground */
  --mv-text:            #333333;   /* body copy on light */
  --mv-text-secondary:  #646476;   /* secondary text - 5.79:1, passes AA */
  --mv-grey:            #939598;   /* LOGO WORDMARK ONLY - 3.00:1, never text */
  --mv-text-muted:      #646476;   /* alias -> secondary (was #797979, failed AA) */
  --mv-white:           #FFFFFF;
  --mv-beige:           #F8F5F2;   /* signature warm page ground */
  --mv-surface:         #F8F8F8;   /* inputs, inset panels */
  --mv-stroke:          #F3F3F3;   /* hairline dividers */
  --mv-mist:            #E2E8E8;   /* cool borders, disabled fills */

  /* --- On dark sections ------------------------------------- */
  --mv-on-dark:         rgba(255,255,255,1);
  --mv-on-dark-body:    rgba(255,255,255,0.55);
  --mv-on-dark-muted:   rgba(255,255,255,0.45);
  --mv-on-dark-border:  rgba(255,255,255,0.10);
  --mv-on-dark-fill:    rgba(255,255,255,0.07);

  /* --- Semantic --------------------------------------------- */
  --mv-success:         #2D8A4E;   /* 4.32:1 - pair with an icon, not colour alone */
  --mv-gold:            #F9B400;   /* review stars only */
  --mv-error:           #A32E2A;

  /* --- Shopify platform ------------------------------------
     Maverick is a Shopify agency; these are part of the palette.
     Use for platform badges, integration states, charts and diagrams
     where Shopify is the subject. Exact values from Shopify's own SVGs. */
  --shopify-green:      #95BF47;   /* primary - fills & marks; 2.14:1, not text */
  --shopify-green-dark: #5E8E3E;   /* deeper  - text on light at 18px+; 3.88:1 */
  --shopify-green-ink:  #3D5E28;   /* darkened for body text; 7.42:1 on white */

  /* --- Data source colours -------------------------------
     One colour per connector on every client and theme, used where
     sources are compared (stacks, two lines, legends). Fill for bars and
     lines, -text for words on light (all ≥4.5:1), -on-dark and
     -on-dark-text for dark grounds. Never colour alone: logo + name too.
     Shopify keeps its brand-page green until Shopify changes it. */
  --src-shopify:              var(--shopify-green);
  --src-shopify-text:         var(--shopify-green-ink);
  --src-shopify-on-dark:      var(--shopify-green);
  --src-shopify-on-dark-text: var(--shopify-green);
  --src-ga4:                   #F9AB00;
  --src-ga4-text:              #A15C00;   /* 5.19:1 on white */
  --src-ga4-on-dark:           #F9AB00;
  --src-ga4-on-dark-text:      #F9AB00;   /* 9.98:1 on --mv-ink */
  --src-google-ads:            #FBBC04;
  --src-google-ads-text:       #8A6500;   /* 5.33:1 on white */
  --src-google-ads-on-dark:    #FBBC04;
  --src-google-ads-on-dark-text:#FBBC04;   /* 11.30:1 on --mv-ink */
  --src-search-console:        #4285F4;
  --src-search-console-text:   #1A5BC4;   /* 6.29:1 on white */
  --src-search-console-on-dark:#4285F4;
  --src-search-console-on-dark-text:#4285F4;   /* 5.42:1 on --mv-ink */
  --src-meta:                  #0866FF;
  --src-meta-text:             #0759D6;   /* 6.16:1 on white */
  --src-meta-on-dark:          #0866FF;
  --src-meta-on-dark-text:     #1C73FF;   /* 4.55:1 on --mv-ink */
  --src-facebook:              #1877F2;
  --src-facebook-text:         #1462C8;   /* 5.82:1 on white */
  --src-facebook-on-dark:      #1877F2;
  --src-facebook-on-dark-text: #1877F2;   /* 4.56:1 on --mv-ink */
  --src-instagram:             #E1306C;
  --src-instagram-text:        #B8235A;   /* 6.13:1 on white */
  --src-instagram-on-dark:     #E1306C;
  --src-instagram-on-dark-text:#E2346F;   /* 4.55:1 on --mv-ink */
  --src-tiktok:                #000000;
  --src-tiktok-text:           #000000;   /* 21.00:1 on white */
  --src-tiktok-on-dark:        #25F4EE;
  --src-tiktok-on-dark-text:   #25F4EE;   /* 14.02:1 on --mv-ink */
  --src-klaviyo:               #232426;
  --src-klaviyo-text:          #232426;   /* 15.53:1 on white */
  --src-klaviyo-on-dark:       #C9CACC;
  --src-klaviyo-on-dark-text:  #C9CACC;   /* 11.77:1 on --mv-ink */
  --src-omnisend:              #000000;
  --src-omnisend-text:         #000000;   /* 21.00:1 on white */
  --src-omnisend-on-dark:      #C9CACC;
  --src-omnisend-on-dark-text: #C9CACC;   /* 11.77:1 on --mv-ink */
  --src-clarity:               #0078D4;
  --src-clarity-text:          #0067B8;   /* 5.78:1 on white */
  --src-clarity-on-dark:       #0078D4;
  --src-clarity-on-dark-text:  #007EDE;   /* 4.63:1 on --mv-ink */
  --src-dataforseo:            #7C5CFC;
  --src-dataforseo-text:       #5A3BE0;   /* 6.69:1 on white */
  --src-dataforseo-on-dark:    #7C5CFC;
  --src-dataforseo-on-dark-text:#8061FC;   /* 4.63:1 on --mv-ink */

  /* --- Shadow ----------------------------------------------- */
  --mv-shadow-sm:       0 1px 3px rgba(0,0,0,0.07);
  --mv-shadow-md:       0 4px 16px rgba(0,0,0,0.08);

  /* --- Typefaces -------------------------------------------- */
  --mv-font-display:    'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --mv-font-body:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mv-font-ui:         'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Type scale ------------------------------------------- */
  --mv-text-hero:       clamp(3rem, 7vw, 7rem);
  --mv-text-6xl:        67px;   /* signature section headline */
  --mv-text-5xl:        56px;
  --mv-text-4xl:        48px;
  --mv-text-3xl:        32px;
  --mv-text-2xl:        24px;
  --mv-text-xl:         20px;
  --mv-text-lg:         18px;
  --mv-text-base:       16px;
  --mv-text-sm:         14px;
  --mv-text-xs:         12px;

  /* --- Line height ------------------------------------------ */
  --mv-leading-display: 1.0;
  --mv-leading-body:    1.6;
  --mv-leading-ui:      1.4;

  /* --- Letter spacing --------------------------------------- */
  --mv-tracking-display: 0.02em;  /* Bebas — always */
  --mv-tracking-label:   0.08em;  /* uppercase eyebrows */

  /* --- Spacing (4px base) ----------------------------------- */
  --mv-space-1:   4px;
  --mv-space-2:   8px;
  --mv-space-3:  12px;
  --mv-space-4:  16px;
  --mv-space-5:  20px;
  --mv-space-6:  24px;
  --mv-space-8:  32px;
  --mv-space-10: 40px;
  --mv-space-12: 48px;
  --mv-space-16: 64px;
  --mv-space-20: 80px;
  --mv-space-24: 96px;
  --mv-space-30: 120px;

  /* --- Radius ----------------------------------------------- */
  /* Maverick is square-cornered, after the mark. xs-lg are kept as
     aliases of none so existing code goes square; use none in new code. */
  --mv-radius-none:  0;      /* default - the mark and every rectangle */
  --mv-radius-xs:    0;
  --mv-radius-sm:    0;
  --mv-radius-md:    0;
  --mv-radius-lg:    0;
  --mv-radius-pill: 100px;
  --mv-radius-full: 50%;

  /* --- Motion ----------------------------------------------- */
  --mv-ease:           ease;
  --mv-duration-fast:  200ms;
  --mv-duration:       300ms;
  --mv-lift:           translateY(-3px);

  /* --- Layout ----------------------------------------------- */
  --mv-container:      1200px;
  --mv-measure:        65ch;
  --mv-section-y:      120px;
}

@media (max-width: 767px) {
  :root {
    --mv-text-6xl: 40px;
    --mv-text-5xl: 36px;
    --mv-text-4xl: 32px;
    --mv-text-3xl: 26px;
    --mv-section-y: 80px;
  }
}

/* ===========================================================
   Base
   =========================================================== */

body {
  margin: 0;
  background: var(--mv-beige);
  color: var(--mv-text);
  font-family: var(--mv-font-body);
  font-size: var(--mv-text-base);
  line-height: var(--mv-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--mv-space-5);
  font-family: var(--mv-font-display);
  font-weight: 400;                       /* Bebas is single-weight */
  line-height: var(--mv-leading-display);
  letter-spacing: var(--mv-tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--mv-ink-navy);
}

h1 { font-size: var(--mv-text-hero); }
h2 { font-size: var(--mv-text-6xl); }
h3 { font-size: var(--mv-text-4xl); }
h4 { font-size: var(--mv-text-3xl); }

/* h5/h6 step out of Bebas — too small for a display face */
h5, h6 {
  margin: 0 0 var(--mv-space-3);
  font-family: var(--mv-font-body);
  font-weight: 600;
  line-height: var(--mv-leading-ui);
  letter-spacing: normal;
  text-transform: none;
  color: var(--mv-ink-navy);
}
h5 { font-size: var(--mv-text-2xl); }
h6 { font-size: var(--mv-text-xl); }

p { margin: 0 0 var(--mv-space-4); max-width: var(--mv-measure); }

a { color: var(--mv-pink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--mv-pink-hover); }

:focus-visible { outline: 2px solid var(--mv-pink); outline-offset: 3px; }

/* ===========================================================
   Utilities
   =========================================================== */

.mv-container { width: 100%; max-width: var(--mv-container); margin-inline: auto; padding-inline: var(--mv-space-6); }
.mv-section   { padding-block: var(--mv-section-y); }

.mv-eyebrow {
  font-family: var(--mv-font-ui);
  font-size: var(--mv-text-xs);
  font-weight: 600;
  letter-spacing: var(--mv-tracking-label);
  text-transform: uppercase;
  color: var(--mv-pink);
}

.mv-lead { font-size: var(--mv-text-lg); color: var(--mv-text); }

/* Dark section — scope, not a theme toggle */
.mv-dark { background: var(--mv-ink); color: var(--mv-on-dark-body); }
.mv-dark h1, .mv-dark h2, .mv-dark h3, .mv-dark h4,
.mv-dark h5, .mv-dark h6 { color: var(--mv-on-dark); }
.mv-dark .mv-eyebrow     { color: var(--mv-on-dark-muted); }
.mv-dark hr              { border-color: var(--mv-on-dark-border); }

/* ===========================================================
   Components
   =========================================================== */

.mv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 40px;
  border: none;
  border-radius: var(--mv-radius-none);
  background: var(--mv-pink);
  color: var(--mv-white);
  font-family: var(--mv-font-ui);
  font-size: var(--mv-text-base);
  font-weight: 500;
  line-height: var(--mv-leading-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--mv-duration) var(--mv-ease),
              background-color var(--mv-duration) var(--mv-ease),
              color var(--mv-duration) var(--mv-ease);
}
.mv-btn:hover    { background: var(--mv-black); color: var(--mv-white); transform: var(--mv-lift); }
.mv-btn:active   { transform: translateY(-1px); }
.mv-btn:disabled { background: var(--mv-mist); color: var(--mv-text-secondary); cursor: not-allowed; transform: none; }

.mv-btn--secondary {
  background: transparent;
  border: 1px solid var(--mv-black);
  color: var(--mv-black);
}
.mv-btn--secondary:hover { background: var(--mv-black); color: var(--mv-white); }

.mv-btn--ghost {
  background: transparent;
  border: 1px solid var(--mv-on-dark-border);
  color: var(--mv-on-dark);
}
.mv-btn--ghost:hover { background: var(--mv-on-dark-fill); color: var(--mv-on-dark); }

.mv-btn--sm { padding: 10px 24px; font-size: var(--mv-text-sm); }
.mv-btn--lg { padding: 18px 48px; font-size: var(--mv-text-lg); }

.mv-pill {
  display: inline-flex; align-items: center;
  padding: 6px 16px;
  border: 1px solid var(--mv-stroke);
  border-radius: var(--mv-radius-pill);
  background: transparent;
  color: var(--mv-text);
  font-family: var(--mv-font-ui);
  font-size: var(--mv-text-xs);
  font-weight: 500;
  letter-spacing: var(--mv-tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--mv-duration-fast) var(--mv-ease),
              color var(--mv-duration-fast) var(--mv-ease);
}
.mv-pill[aria-pressed="true"],
.mv-pill.is-active { background: var(--mv-pink); border-color: transparent; color: var(--mv-white); }
.mv-dark .mv-pill  { border-color: var(--mv-on-dark-border); color: var(--mv-on-dark-body); }

.mv-card {
  background: var(--mv-white);
  border: 1px solid var(--mv-stroke);
  border-radius: var(--mv-radius-none);
  padding: var(--mv-space-8);
  box-shadow: var(--mv-shadow-sm);
  transition: transform var(--mv-duration) var(--mv-ease),
              box-shadow var(--mv-duration) var(--mv-ease);
}
a.mv-card:hover, .mv-card--interactive:hover { transform: var(--mv-lift); box-shadow: var(--mv-shadow-md); }
.mv-dark .mv-card { background: var(--mv-on-dark-fill); border-color: var(--mv-on-dark-border); color: var(--mv-on-dark-body); }

.mv-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--mv-stroke);
  border-radius: var(--mv-radius-none);
  background: var(--mv-surface);
  color: var(--mv-text);
  font-family: var(--mv-font-body);
  font-size: var(--mv-text-base);   /* 16px min — prevents iOS zoom */
  transition: border-color var(--mv-duration-fast) var(--mv-ease);
}
.mv-input:focus       { border-color: var(--mv-pink); }
.mv-input[aria-invalid="true"] { border-color: var(--mv-error); }
.mv-input::placeholder{ color: var(--mv-text-secondary); }


/* ===========================================================
   Brand devices  (see CLAUDE.md §5)
   =========================================================== */

/* The fading pink rule - section divider, from the email signature */
.mv-rule {
  height: 2px; border: 0; border-radius: 1px; margin: var(--mv-space-8) 0;
  background: linear-gradient(90deg, var(--mv-pink) 0%, var(--mv-pink-light) 50%, transparent 100%);
}

/* The double-slash quote mark - testimonials open with pink //, not a quote glyph */
.mv-quote { position: relative; padding-left: 2.6em; font-style: italic; color: var(--mv-text-secondary); }
.mv-quote::before {
  content: "//"; position: absolute; left: 0; top: -0.08em;
  font-family: var(--mv-font-ui); font-weight: 700; font-style: normal;
  font-size: 1.6em; line-height: 1; color: var(--mv-pink);
}
.mv-quote cite { display: block; margin-top: var(--mv-space-3);
  font-style: normal; font-size: var(--mv-text-sm); color: var(--mv-pink); }

/* Mixed-weight heading - "The <em>Maverick</em> Retainer" */
.mv-headline em { font-style: normal; font-weight: 700; color: var(--mv-pink); }

/* Outline button - per the email signature CTA, squared */
.mv-btn--outline {
  background: transparent;
  border: 1.5px solid var(--mv-pink);
  border-radius: var(--mv-radius-none);
  color: var(--mv-pink);
  padding: 8px 18px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.mv-btn--outline:hover { background: var(--mv-pink-tint); color: var(--mv-pink); }

/* Icon badge - 32x32 pink square */
.mv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--mv-pink); border-radius: var(--mv-radius-none);
  color: var(--mv-white);
}
.mv-badge svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }

/* ===========================================================
   Motion preference
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mv-btn:hover, .mv-card:hover, a.mv-card:hover { transform: none; }
}