/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */ /* Hallmark · genre: modern-minimal · design-system: design.md · scope: Kavto */ html { font-size: 62.5%; overflow-x: clip; } :root { /* Marca: fallback local. Root/White-label los sobrescribe en el . */ --color-primary: #43d5ae; --color-primary-hover: #087d70; --color-primary-light: color-mix(in oklab, var(--color-primary) 18%, var(--color-bg)); --color-text-on-primary: #0b292d; --color-focus: #286de0; /* Neutros y superficies */ --color-bg: #f5fbf9; --color-surface: #ffffff; --color-surface-soft: color-mix(in oklab, var(--color-surface) 88%, var(--color-primary) 12%); --color-card: color-mix(in oklab, var(--color-surface) 96%, var(--color-bg)); --color-border: #c9dfda; --color-text-main: #102f36; --color-text-muted: #506b70; --color-text-on-hover: #102f36; --color-header-bg: #f5fbf9; --color-header-text: #102f36; --color-sidebar-bg: #ffffff; --color-sidebar-text: #102f36; /* Estados */ --color-success: #087d70; --color-success-light: color-mix(in oklab, var(--color-success) 12%, var(--color-bg)); --color-warning: #a15c00; --color-warning-light: color-mix(in oklab, var(--color-warning) 12%, var(--color-bg)); --color-trial: oklch(76% 0.16 72); --color-trial-light: color-mix(in oklab, var(--color-trial) 16%, transparent); --color-error: #c53637; --color-error-light: color-mix(in oklab, var(--color-error) 10%, var(--color-bg)); --color-info: #286de0; --color-info-light: color-mix(in oklab, var(--color-info) 10%, var(--color-bg)); --color-code-bg: #0d1117; --color-code-text: #e6edf3; /* Colores de contenido, no de branding */ --color-coffee-dark: #332117; --color-coffee: #765039; --color-coffee-cream: #f0e1cd; --color-boutique: #674363; --color-salon: #df7b68; /* Tipografía */ --font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif; --font-body: "Geist", "Segoe UI", system-ui, sans-serif; --font-label: "Geist Mono", "Courier New", monospace; --font-weight-medium: 500; --font-weight-normal: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.6; --line-height-relaxed: 1.75; --letter-spacing-wide: 0.04em; /* Escala tipográfica */ --txt-xs: clamp(1.2rem, calc(0.095vw + 1.17rem), 1.3rem); --txt-s: clamp(1.3rem, calc(0.191vw + 1.24rem), 1.5rem); --txt-m: clamp(1.5rem, calc(0.191vw + 1.44rem), 1.7rem); --txt-l: clamp(1.7rem, calc(0.382vw + 1.58rem), 2.1rem); --txt-xl: clamp(2rem, calc(0.765vw + 1.76rem), 2.8rem); --txt-2xl: 3.1rem; --txt-3xl: 3.9rem; --txt-display: clamp(4.4rem, 6.5vw, 8.4rem); --dashboard-page-title-size: clamp(3.6rem, 4vw, 5.6rem); --titulo: clamp(4rem, calc(1.529vw + 3.51rem), 5.6rem); --h1: clamp(2.8rem, calc(1.912vw + 2.19rem), 4.8rem); --h2: clamp(2.4rem, calc(1.147vw + 2.03rem), 3.6rem); --h3: clamp(2rem, calc(0.574vw + 1.82rem), 2.6rem); --h4: clamp(1.7rem, calc(0.287vw + 1.61rem), 2rem); /* Escala de 4 px */ --space-3xs: 0.2rem; --space-2xs: 0.4rem; --space-xs: 0.8rem; --space-s: clamp(1.6rem, calc(0.3824vw + 1.4776rem), 2rem); --space-m: clamp(2.4rem, calc(0.5736vw + 2.2164rem), 3rem); --space-l: clamp(3.1992rem, calc(1.2436vw + 2.8012rem), 4.5rem); --space-xl: clamp(4.2645rem, calc(2.3762vw + 3.5042rem), 6.75rem); --space-2xl: 6.4rem; --space-3xl: 9.6rem; --sec-space-s: clamp(2.4rem, calc(2.4857vw + 1.6046rem), 5rem); --sec-space-m: clamp(3.6rem, calc(3.7285vw + 2.4069rem), 7.5rem); --sec-space-l: clamp(4.8rem, calc(6.1675vw + 2.8252rem), 11.25rem); --sec-pad-x: clamp(2rem, calc(4.2065vw + 0.6539rem), 6.4rem); /* Forma */ --radius-sm: 0.4rem; --radius-md: 0.8rem; --radius-card: 0.8rem; --radius-control: 0.8rem; --radius-shell: 2.8rem; --radius-pill: 9999px; --border-width: 1px; /* Layout */ --control-height: 4.4rem; --content-max: 136.6rem; --sidebar-width: 28rem; --sidebar-inset: 1.6rem; --width-xs: 13.66rem; --width-s: 27.32rem; --width-m: 54.64rem; --width-l: 81.96rem; --width-vp-max: 136.6rem; --grid-1: repeat(1, minmax(0, 1fr)); --grid-gap: clamp(1rem, 1.147vw + 1.633rem, 3.2rem); --outer-border: 2.5rem; --logo-height: clamp(3.5rem, 5.21vw + 2.08rem, 5.5rem); --header-pad-y: clamp(2rem, 0.25vw + 0.84rem, 4rem); --header-height: calc((var(--header-pad-y)) * 2 + var(--logo-height)); /* Movimiento y capas */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-micro: 120ms; --duration-short: 220ms; --duration-long: 420ms; --tooltip-delay: 800ms; --interaction-lift: -0.1rem; --opacity-disabled: 0.55; --z-dropdown: 100; --z-modal: 200; /* Elevación */ --shadow-soft: 0 0.1rem 0.2rem rgb(16 47 54 / 6%); --shadow-card: 0 0.4rem 1.2rem rgb(16 47 54 / 8%); --shadow-float: 0 1.2rem 4rem rgb(16 47 54 / 12%); --shadow-hover: 0 1.2rem 2.8rem rgb(8 125 112 / 18%); --shadow-focus: 0 0 0 0.3rem color-mix(in oklab, var(--color-focus) 22%, transparent); --transition-fast: var(--duration-micro) var(--ease-out); --transition-base: var(--duration-short) var(--ease-out); --bs-body-font-family: "Geist", "Segoe UI", system-ui, sans-serif; } body { margin: 0; overflow-x: clip; color: var(--color-text-main); background: var(--color-bg); font-family: var(--font-body); font-size: var(--txt-m); } @media (prefers-reduced-motion: reduce) { :root { --duration-micro: 0ms; --duration-short: 120ms; --duration-long: 150ms; } } /* Base Icon System */ svg.icon, .icon { display: inline-block; width: 1em; height: 1em; max-width: 100%; max-height: 100%; vertical-align: -0.15em; fill: currentColor; flex-shrink: 0; } .icon-brand { fill: initial; } /* Icon Color Utility Classes (Contrast Audited WCAG AA/AAA) */ .icon-success { color: #059669; } .icon-danger { color: #dc2626; } .icon-warning { color: #d97706; } .icon-neutral { color: #4b5563; } /* Strict Component Icon Sizing & Alignments */ .overview-toolbar__icon svg, .overview-toolbar__icon .icon { width: 1.8rem !important; height: 1.8rem !important; } .sidebar-setup__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 2.8rem !important; height: 2.8rem !important; } .sidebar-setup__icon svg, .sidebar-setup__icon .icon { width: 1.6rem !important; height: 1.6rem !important; } .sidebar-trial-notice__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .sidebar-trial-notice__icon svg, .sidebar-trial-notice__icon .icon { width: 1.8rem !important; height: 1.8rem !important; color: var(--color-warning, #d97706) !important; } .sidebar-trial-notice__chevron svg, .sidebar-trial-notice__chevron .icon { width: 1.4rem !important; height: 1.4rem !important; } .sub-status-banner__icon svg, .sub-status-banner__icon .icon { width: 2.4rem !important; height: 2.4rem !important; } .ob-reminder__icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 3.4rem !important; height: 3.4rem !important; } .ob-reminder__icon svg, .ob-reminder__icon .icon { width: 2.2rem !important; height: 2.2rem !important; } .ob-reminder__action svg, .ob-reminder__action .icon, .setup-step__action svg, .setup-step__action .icon { width: 1.6rem !important; height: 1.6rem !important; } .setup-step__status svg, .setup-step__status .icon { width: 1.6rem !important; height: 1.6rem !important; } .input-group__icon, .input-group__icon svg, .input-group__icon .icon { width: 1.8rem !important; height: 1.8rem !important; } .merchant-mobile-nav__item svg, .merchant-mobile-nav__item .icon { width: 2.2rem !important; height: 2.2rem !important; } .merchant-mobile-nav__scanner-control svg, .merchant-mobile-nav__scanner-control .icon { width: 2.6rem !important; height: 2.6rem !important; } .history-empty svg, .history-empty .icon { width: 4rem !important; height: 4rem !important; } .history-submit svg, .history-submit .icon, .history-clear svg, .history-clear .icon { width: 1.6rem !important; height: 1.6rem !important; } .trial-notice__icon, .trial-notice__icon svg, .trial-notice__icon .icon { width: 1.8rem !important; height: 1.8rem !important; } .campaign-feedback__icon, .campaign-feedback__icon svg, .campaign-feedback__icon .icon { width: 1.8rem !important; height: 1.8rem !important; } .partner-share-link__label svg, .partner-share-link__label .icon { width: 2.2rem !important; height: 2.2rem !important; color: var(--color-primary, #0d9488) !important; } .public-link-card__actions svg, .public-link-card__actions .icon { width: 1.8rem !important; height: 1.8rem !important; } .distributor-link-preview__logo svg, .distributor-link-preview__logo .icon { width: 4rem !important; height: 4rem !important; } .country-code-help__trigger svg, .country-code-help__trigger .icon { width: 1.8rem !important; height: 1.8rem !important; } .getting-started__complete > svg, .getting-started__complete > .icon { width: 2.8rem !important; height: 2.8rem !important; color: #059669 !important; }