/*
 * Shared brand tokens for the standalone Market Connect marketing pages.
 * Values sampled directly (getComputedStyle) from the real, live production
 * site at vercaa.com on 2026-08-13 -- this is the site's own real brand,
 * not a reference competitor, so exact sampling is the correct and only
 * way to stay authentically on-brand (unlike hosting.com research elsewhere
 * in this project, where sampling colors was explicitly off-limits).
 *
 * Every one of the 7 pages under market/*.php links this file identically.
 * Page-specific creative work happens in each page's own <style> block,
 * built ONLY from these tokens -- no new brand colors invented per page.
 */

:root {
  /* Core brand */
  --mc-purple: #a83fff;       /* dominant/primary on the real site -- main CTAs, links, logo */
  --mc-purple-dark: #8b2fd9;
  --mc-purple-soft: rgba(168, 63, 255, 0.1);
  --mc-orange: #f97316;       /* secondary accent */
  --mc-orange-soft: rgba(249, 115, 22, 0.1);
  --mc-green: #22c55e;        /* tertiary accent */
  --mc-green-soft: rgba(34, 197, 94, 0.1);
  --mc-blue: #3b82f6;         /* quaternary accent, seen on real site's info/tech icons */
  --mc-blue-soft: rgba(59, 130, 246, 0.1);
  /* 2026-08-13 (domain-search unification pass): the shared domain-search modal's "Add to
     basket" error state is the first UI on these market pages that ever needed a semantic error
     red -- none of the 7 pages built so far had one. This is NOT a new invented color: it's the
     exact same real, sitewide error-red already established as custom.css's own --error
     (#e11d3c) on the Smarty client area, the one and only error color this whole project uses --
     added here, under the same --mc-* naming convention as the brand colors above, purely
     because it was never needed on this side before. */
  --mc-red: #e11d3c;
  --mc-red-soft: rgba(225, 29, 60, 0.1);

  /* Neutrals */
  --mc-ink: #0f1115;
  /* 2026-08-25: `--mc-ink` is dual-purposed as this file's flipping text/ink token (it's what
     `--text` aliases to) -- correctly near-black in light mode, correctly redefined near-white in
     the :root[data-theme="dark"] block below (see --text usage sitewide). Several of the 7 market
     pages' own <style> blocks (vpn.php's ".vpn-hero"/".vpn-stats", ssl.php's ".included",
     website-security.php's stats band, email.php's ".ox-price-card .ox-btn-primary", email-
     security.php's ".es-result", monitoring.php's hero gradient, and their own locally-derived
     color-mix() tints built on top of these) reused `--mc-ink` for a DIFFERENT, unrelated purpose:
     a permanently-dark decorative surface (paired with hardcoded `color:#fff`) that's meant to
     stay near-black in BOTH themes -- the same "brand colors don't invert with the theme"
     convention this file already documents for --mc-purple/-orange/-green/-blue. Because `--mc-
     ink` itself flips to near-white in dark mode, every one of those surfaces silently became
     near-white-background-with-white-text (i.e. invisible) whenever a visitor had dark mode on --
     a real, live-confirmed bug (found auditing vpn.php's hero: computed background rgb(245,243,
     248) under white text). Fix: `--mc-ink-fixed` is the SAME real value `--mc-ink` already had
     (#0f1115, not a new invented hex) but declared ONLY here in the base :root, never redefined in
     the dark block -- exactly the same non-flipping pattern the brand colors already use. Any
     future "deliberately always-dark" surface should reference this, never bare `--mc-ink`. */
  --mc-ink-fixed: #0f1115;
  --mc-text: #1f2430;
  /* 2026-08-25: monitoring.php's .mp-btn-ghost/.mp-channel (hero "See pricing" button, alert-
     channel pills) are ALSO permanently-white surfaces (background:#fff) whose label text used the
     flipping --mc-text instead of --mc-ink-fixed/--mc-text-muted-fixed below -- same bug, third
     token. Same real light-mode value, non-flipping. */
  --mc-text-fixed: #1f2430;
  --mc-text-muted: #6b7280;
  --mc-border: #e5e7eb;
  --mc-border-soft: #f1f2f4;
  --mc-bg: #ffffff;
  --mc-bg-muted: #fafafa;
  /* 2026-08-25: same fixed-token pattern as --mc-ink-fixed above, for the two sibling tokens that
     turned up needing it during the 7-page dark-mode audit (email.php's floating-calendar mockup
     day cells, monitoring.php's ghost button/alert pills/badges/FAQ answers -- see each page's own
     comment at its usage site). Both --mc-bg-muted and --mc-text-muted are, like --mc-ink, dual-
     purposed: correctly flipping tokens for the page's own normal (also-flipping) surfaces, but
     several pages also used them for content sitting on a DELIBERATELY-ALWAYS-WHITE decorative
     card (background:#fff, never redefined for dark mode -- the mockup illustrations, ghost
     buttons, pill badges). On those specific cards only, the flip is wrong: dark mode either turns
     "subtle light-gray cell on white" into "near-black cell on white" (--mc-bg-muted, `#121019`
     in dark mode) or drops muted label text to ~2.3:1 contrast (--mc-text-muted's dark value
     `#ada9bc` sampled against a fixed white card it was never meant to sit on, rather than the
     dark `--mc-bg` it correctly pairs with everywhere else). Same real light-mode values, declared
     ONLY in the base :root, never redefined in the dark block below -- not new invented hexes. */
  --mc-bg-muted-fixed: #fafafa;
  --mc-text-muted-fixed: #6b7280;

  /* Typography */
  --mc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --mc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mc-duration: 200ms;

  /* Shape */
  --mc-radius-lg: 20px;
  --mc-radius-xl: 28px;
  --mc-radius-pill: 999px;

  /* -----------------------------------------------------------------------
     "App" token aliases (2026-08-13 header/footer unification pass) — the shared
     templates/vercaa-2026/css/guest-chrome.css stylesheet (loaded here AND by the Smarty client
     area, see market/_header.php / templates/vercaa-2026/includes/head.tpl) is written once,
     using the same var() names custom.css's own :root already defines (--primary, --text,
     --bg-muted, --elevation-3, etc.). Every alias below points at an already-existing --mc-*
     value directly above -- no new hex literal anywhere in this block -- so guest-chrome.css
     resolves to the identical real brand color in both contexts. Only the specific names
     guest-chrome.css actually references are aliased (not a blanket copy of every token in
     custom.css); add more here only if a future edit to that shared file needs one.
     ----------------------------------------------------------------------- */
  --primary: var(--mc-purple);
  --primary-lifted: var(--mc-purple-dark);
  --primary-accented: var(--mc-purple-dark);
  --primary-soft: var(--mc-purple-soft);
  /* --primary-glow: dark-mode-only bright variant, mirrors custom.css's own --primary-glow token
     exactly (2026-08-14 dark-mode contrast fix -- see that file's own comment for the full WCAG
     derivation: same H273/S100 hue+saturation as --mc-purple, lightness lifted L62->L68, clears
     4.5:1+ on every real dark surface here). Inert in light mode (no consumer references it until
     the dark block below repoints --primary-accented at it), same as custom.css's copy. */
  --primary-glow: var(--mc-purple);
  --secondary: var(--mc-orange);
  --warning-soft: var(--mc-orange-soft);
  --warning-accented: var(--mc-orange);
  --success: var(--mc-green);
  /* 2026-08-13 (domain-search unification pass) -- added for css/domain-search-modal.css, the
     first shared component loaded here that needed these. --success-soft/-accented follow this
     file's own pre-existing convention of using the base brand hue as its own soft-background
     text/badge color (see this same file's --mc-purple on --mc-purple-soft usage already shipped
     across every one of these 7 pages' own <style> blocks, e.g. domains.php's .tld-chip). --error/
     -soft alias the new --mc-red/-soft pair above -- the sitewide error red, needed here for the
     very first time. --white mirrors custom.css's own literal (#fff is not a new color, it's
     already used everywhere real content sits on this site). */
  --white: #fff;
  --success-soft: var(--mc-green-soft);
  --success-accented: var(--mc-green);
  --error: var(--mc-red);
  --error-soft: var(--mc-red-soft);

  --text: var(--mc-ink);
  --text-accented: var(--mc-text);
  --text-lifted: var(--mc-text-muted);
  --text-muted: var(--mc-text-muted);

  --bg: var(--mc-bg);
  --bg-muted: var(--mc-bg-muted);
  /* 2026-08-13: this palette otherwise only has 2 background steps (bg/bg-muted) -- the Smarty
     side's finer-grained --bg-lifted/--bg-accented (hover tints, one step lighter than bg-muted)
     alias to the closest already-existing neutral here, --mc-border-soft (which already flips
     with the theme via its own dark-mode redefinition below), rather than inventing a 3rd/4th
     literal background step just for this one component. */
  --bg-lifted: var(--mc-border-soft);
  --bg-accented: var(--mc-border-soft);
  --border: var(--mc-border);
  --border-muted: var(--mc-border-soft);
  --border-lifted: var(--mc-border);

  --font-heading: var(--mc-font);
  --font-body: var(--mc-font);
  --text-xs: 0.625rem;
  --text-sm: 0.75rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;

  --rounding-md: 0.5rem;
  --rounding-lg: 0.75rem;
  --rounding-xl: 1rem;

  --ease-standard: var(--mc-ease);
  --ease-out: var(--mc-ease);
  --duration-fast: 150ms;
  --duration-base: var(--mc-duration);
  --duration-slow: 300ms;
  --duration-drawer-open: 500ms;
  --duration-drawer-close: 300ms;

  /* Stacked focus-visible ring -- same formula as custom.css's own token (2px "gap" ring + accent
     ring), needed here for the first time by .app-domain-modal-search-field:focus-within
     (css/domain-search-modal.css). --bg above is already aliased to var(--mc-bg). */
  --focus-ring-color: var(--mc-purple);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring-color);

  --elevation-2: 0 3px 8px rgba(15, 17, 21, 0.06), 0 14px 32px -12px rgba(15, 17, 21, 0.16);
  --elevation-3: 0 6px 16px rgba(15, 17, 21, 0.08), 0 24px 48px -16px rgba(15, 17, 21, 0.2);
  --elevation-4: 0 12px 28px rgba(15, 17, 21, 0.12), 0 32px 70px -24px rgba(15, 17, 21, 0.3);

  /* 2026-08-13 (hosting-configurator extraction pass): 4 more aliases, needed for the first time by
     css/hosting-configurator.css (the plan-slider/term-slider component, MOVED out of custom.css into
     its own shared file so both the Smarty homepage and these plain-PHP market pages link the exact
     same stylesheet -- same reasoning as guest-chrome.css/domain-search-modal.css above).
     --rounding-2xl mirrors custom.css's own real value (1.75rem) exactly -- already equal to
     --mc-radius-xl (28px) here, so this is a same-value alias, not an approximation.
     --bg-inverted/--text-inverted back the "Your Plan" card's intentionally-flipped surface (near-
     black card in light mode, near-white card in dark mode -- see custom.css's own docblock on
     .vhp-config-plan-card for why that's the deliberate choice). --mc-ink/--mc-bg already flip with
     the theme in exactly the directions needed (mc-ink: near-black light / near-white dark; mc-bg:
     white light / near-black dark) -- no new literal, just pointing at the two existing neutrals that
     already invert the right way.
     --disabled-opacity is copied as the same plain fraction custom.css uses (not a color, so the
     "trace to an existing var(--token)" rule doesn't apply -- there is no color to alias). */
  --rounding-2xl: var(--mc-radius-xl);
  --bg-inverted: var(--mc-ink);
  --text-inverted: var(--mc-bg);
  --disabled-opacity: 0.25;
}

/* -----------------------------------------------------------------------
   Dark mode (2026-08-13 header/footer unification pass) — toggled the exact same way as the
   Smarty client area: data-theme="dark" on <html>, set by templates/vercaa-2026/js/
   guest-chrome.js (market pages' own small vanilla-JS theme toggle) and persisted to
   localStorage under the same "vercaaTheme" key, so switching themes on a market page and then
   navigating into the real client area (or vice versa) keeps the same choice.

   Because every one of the 7 real Market Connect pages' own <style> blocks is already written
   entirely against these --mc-* tokens (confirmed: no raw hex color literals outside a couple of
   deliberately-always-dark decorative gradients), redefining the base neutrals + soft tints here
   is enough to carry the WHOLE page into dark mode correctly, not just the shared header/footer
   chrome -- no per-page edits needed. Values mirror custom.css's own :root[data-theme="dark"]
   block (same near-black/off-white/soft-translucent-tint convention) so both contexts read as
   one consistent dark theme, not two different ones. --mc-purple/-orange/-green/-blue themselves
   are UNCHANGED here on purpose -- brand colors don't invert with the theme, same convention
   custom.css's own dark block already follows for --primary/--secondary/--success.
   ----------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --mc-ink: #f5f3f8;
  --mc-text: #d9d6e1;
  --mc-text-muted: #ada9bc;
  --mc-border: #3c3950;
  --mc-border-soft: #201e2a;
  --mc-bg: #0c0b12;
  --mc-bg-muted: #121019;

  --mc-purple-soft: rgba(168, 63, 255, 0.18);
  --mc-orange-soft: rgba(249, 115, 22, 0.18);
  --mc-green-soft: rgba(34, 197, 94, 0.18);
  --mc-blue-soft: rgba(59, 130, 246, 0.22);
  --mc-red-soft: rgba(225, 29, 60, 0.2);

  /* 2026-08-14 dark-mode contrast fix: was `var(--mc-purple)` (raw #a83fff, identical to custom.css's
     pre-fix bug) -- a real WCAG audit found that only clears 4.33-4.5:1 against these same real dark
     surfaces (--mc-bg/--mc-bg-muted), the same fail as every --primary-accented-as-text consumer on
     the Smarty side (icon chips, links, etc.) -- these market pages' own page-specific <style>
     blocks use this exact token the same way (e.g. domains.php's .tld-chip). Repointed to
     --primary-glow (#b55cff via --mc-purple, 5.3-5.5:1) -- same fix as custom.css's own copy of this
     exact token, just mirrored into this file's separate token system. */
  /* The real bright value -- see custom.css's own --primary-glow comment for the derivation.
     Without this line --primary-glow would fall through to its base :root definition
     (var(--mc-purple), i.e. unchanged raw #a83fff), which is exactly the bug being fixed. */
  --primary-glow: #b55cff;
  --primary-accented: var(--primary-glow);
  --warning-accented: var(--mc-orange);

  --elevation-2: 0 3px 8px rgba(0, 0, 0, 0.35), 0 14px 32px -12px rgba(0, 0, 0, 0.45);
  --elevation-3: 0 6px 16px rgba(0, 0, 0, 0.4), 0 24px 48px -16px rgba(0, 0, 0, 0.5);
  --elevation-4: 0 12px 28px rgba(0, 0, 0, 0.45), 0 32px 70px -24px rgba(0, 0, 0, 0.6);
}