/**
 * Connect STI / Sistema Vivo — prototype Skin for Velora.
 * The brand primitives stay stable; semantic surfaces switch between dark and light.
 * Promote into the canonical Velora skin source only after visual and content approval.
 */
@layer velora.reset, velora.tokens, velora.layout, velora.motion, velora.components, velora.transitions, velora.utilities, velora.overrides;

@layer velora.tokens {
  html[data-editorial-theme="connectsti"] {
    --vl-connect-ink: #151d1b;
    --vl-connect-ink-soft: #26312d;
    --vl-connect-paper: #f2f0e9;
    --vl-connect-white: #f9f8f4;
    --vl-connect-red: #e7331f;
    --vl-connect-red-deep: #ba2b1f;
    --vl-connect-line: #cbcfc7;
    --vl-connect-line-dark: #47524d;
    --vl-connect-muted: #69736e;
    --vl-connect-muted-light: #aab5ad;
    --vl-connect-font-display: ConnectSignika, Arial, sans-serif;
    --vl-connect-font-body: ConnectManrope, Arial, sans-serif;
    --vl-connect-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --vl-connect-frame: min(100% - clamp(2rem, 5vw, 7rem), 1520px);
    --vl-connect-section-space: clamp(5rem, 10vw, 10rem);
    --vl-connect-ease: cubic-bezier(.16, 1, .3, 1);
    --vl-connect-quick: 280ms;
    --vl-connect-slow: 1100ms;
    --vl-vivo-brand-symbol-rest: 38px;
    --vl-vivo-brand-wordmark-width: 112px;
    --vl-vivo-brand-symbol-sticky: 68px;
    --vl-vivo-motion-cycle: 12s;
    --vl-vivo-motion-state: 720ms;
    --vl-color-primary: var(--vl-connect-red);
    --vl-color-accent: var(--vl-connect-red);
    --vl-font-family: var(--vl-connect-font-body);
    --vl-font-family-display: var(--vl-connect-font-display);
    --vl-font-family-mono: var(--vl-connect-font-mono);
    --vl-radius-sm: 0;
    --vl-radius-md: 0;
    --vl-radius-lg: 0;
    --vl-motion-distance: .75rem;
  }

  html[data-editorial-theme="connectsti"][data-connect-appearance="dark"], html[data-editorial-theme="connectsti"]:not([data-connect-appearance]):has(#site-light:not(:checked)) {
    color-scheme: dark;
    --vl-bg-main: var(--vl-connect-paper);
    --vl-bg-surface: var(--vl-connect-white);
    --vl-text-primary: var(--vl-connect-ink);
    --vl-text-secondary: var(--vl-connect-ink-soft);
    --vl-text-muted: var(--vl-connect-muted);
    --vl-border-subtle: var(--vl-connect-line);
    --vl-vivo-page-bg: var(--vl-connect-paper);
    --vl-vivo-page-text: var(--vl-connect-ink);
    --vl-vivo-hero-bg: var(--vl-connect-ink);
    --vl-vivo-hero-text: var(--vl-connect-white);
    --vl-vivo-hero-muted: var(--vl-connect-muted-light);
    --vl-vivo-hero-line: var(--vl-connect-line-dark);
    --vl-vivo-mark-alternate: var(--vl-connect-white);
    --vl-vivo-header-float-bg: color-mix(in srgb, var(--vl-connect-ink) 92%, transparent);
    --vl-vivo-header-float-text: var(--vl-connect-white);
    --vl-vivo-header-float-line: color-mix(in srgb, var(--vl-connect-white) 16%, transparent);
    --vl-vivo-menu-bg: var(--vl-connect-ink);
    --vl-vivo-mesh-line: color-mix(in srgb, var(--vl-connect-white) 5%, transparent);
    --vl-vivo-work-bg: var(--vl-connect-ink);
    --vl-vivo-work-text: var(--vl-connect-white);
    --vl-vivo-work-muted: var(--vl-connect-muted-light);
    --vl-vivo-case-bg: var(--vl-connect-paper);
    --vl-vivo-case-text: var(--vl-connect-ink);
    --vl-vivo-section-bg: var(--vl-connect-paper);
    --vl-vivo-section-text: var(--vl-connect-ink);
    --vl-vivo-section-muted: var(--vl-connect-muted);
    --vl-vivo-bridge-bg: var(--vl-connect-ink-soft);
    --vl-vivo-bridge-text: var(--vl-connect-white);
    --vl-vivo-bridge-muted: var(--vl-connect-muted-light);
    --vl-vivo-contact-bg: var(--vl-connect-red);
    --vl-vivo-contact-text: var(--vl-connect-white);
  }

  html[data-editorial-theme="connectsti"][data-connect-appearance="light"], html[data-editorial-theme="connectsti"]:not([data-connect-appearance]):has(#site-light:checked) {
    color-scheme: light;
    --vl-bg-main: var(--vl-connect-white);
    --vl-bg-surface: var(--vl-connect-paper);
    --vl-text-primary: var(--vl-connect-ink);
    --vl-text-secondary: var(--vl-connect-ink-soft);
    --vl-text-muted: var(--vl-connect-muted);
    --vl-border-subtle: var(--vl-connect-line);
    --vl-vivo-page-bg: var(--vl-connect-white);
    --vl-vivo-page-text: var(--vl-connect-ink);
    --vl-vivo-hero-bg: var(--vl-connect-paper);
    --vl-vivo-hero-text: var(--vl-connect-ink);
    --vl-vivo-hero-muted: var(--vl-connect-muted);
    --vl-vivo-hero-line: var(--vl-connect-line);
    --vl-vivo-mark-alternate: var(--vl-connect-ink);
    --vl-vivo-header-float-bg: color-mix(in srgb, var(--vl-connect-white) 94%, transparent);
    --vl-vivo-header-float-text: var(--vl-connect-ink);
    --vl-vivo-header-float-line: var(--vl-connect-line);
    --vl-vivo-menu-bg: var(--vl-connect-white);
    --vl-vivo-mesh-line: color-mix(in srgb, var(--vl-connect-ink) 6%, transparent);
    --vl-vivo-work-bg: #e4e7e1;
    --vl-vivo-work-text: var(--vl-connect-ink);
    --vl-vivo-work-muted: var(--vl-connect-muted);
    --vl-vivo-case-bg: var(--vl-connect-white);
    --vl-vivo-case-text: var(--vl-connect-ink);
    --vl-vivo-section-bg: var(--vl-connect-white);
    --vl-vivo-section-text: var(--vl-connect-ink);
    --vl-vivo-section-muted: var(--vl-connect-muted);
    --vl-vivo-bridge-bg: #dce1d8;
    --vl-vivo-bridge-text: var(--vl-connect-ink);
    --vl-vivo-bridge-muted: var(--vl-connect-muted);
    --vl-vivo-contact-bg: var(--vl-connect-red);
    --vl-vivo-contact-text: var(--vl-connect-white);
  }
}