/** * Épico — Área de Clientes Design Tokens * Version: 1.1.1 * Scope: app.epico.site * * Canonical order: primitives -> semantics -> components -> migration aliases. * Components must not consume primitives directly. */ :root { /* * Global default: LIGHT, and only light. * * This file is loaded by three consumers — the panel shell (Assets), the branded * wp-login (LoginBranding) and the "Login Épico" admin screen — so a theme that * activated on `prefers-color-scheme` alone would darken wp-login and wp-admin * without anyone asking. `only light` makes every `light-dark()` below resolve to * its light value everywhere, and the panel is the single surface that opts out, * by setting `data-epico-ca-theme` on its own . Scope leak is impossible by * construction rather than by remembering to scope each rule. */ color-scheme: only light; /* Color primitives — neutral. */ --epico-color-neutral-0: #ffffff; --epico-color-neutral-25: #fbfcff; --epico-color-neutral-50: #f5f8ff; --epico-color-neutral-100: #edf1fa; --epico-color-neutral-200: #d7daec; --epico-color-neutral-300: #b8c0d8; /* * Dark-theme muted text. Measured, not eyeballed: neutral-450 reaches only 4.32:1 on * the dark subtle surface — under AA for body text — while neutral-300 would collapse * into text-secondary. This step clears 4.5 on every dark surface and stays visibly * quieter than secondary. */ --epico-color-neutral-400: #8a92a6; --epico-color-neutral-450: #7f879c; --epico-color-neutral-500: #6f7482; --epico-color-neutral-650: #585d6b; --epico-color-neutral-700: #454956; --epico-color-neutral-800: #3b4354; --epico-color-neutral-850: #2c3240; --epico-color-neutral-900: #292c36; --epico-color-neutral-925: #1f2430; --epico-color-neutral-950: #191d26; --epico-color-neutral-975: #12151c; --epico-color-neutral-1000: #0b0d12; /* Color primitives — transparent. */ --epico-color-transparent-dark-25: rgba(0, 0, 0, 0.25); --epico-color-transparent-dark-50: rgba(0, 0, 0, 0.5); --epico-color-transparent-dark-75: rgba(0, 0, 0, 0.75); --epico-color-transparent-light-15: rgba(255, 255, 255, 0.15); --epico-color-transparent-light-25: rgba(255, 255, 255, 0.25); --epico-color-transparent-light-50: rgba(255, 255, 255, 0.5); --epico-color-transparent-light-75: rgba(255, 255, 255, 0.75); /* Color primitives — brand. */ --epico-color-navy-900: #0a1552; --epico-color-blue-50: #eef2ff; --epico-color-blue-100: #dde5ff; --epico-color-blue-200: #b8c5f7; --epico-color-blue-300: #a9b9f9; --epico-color-blue-400: #8098f6; --epico-color-blue-500: #3e5de9; --epico-color-blue-600: #3253e8; --epico-color-blue-700: #2844c6; --epico-color-blue-800: #203aae; --epico-color-blue-950: #141d3d; --epico-color-pink-50: #fff0f5; --epico-color-pink-100: #fadbe8; --epico-color-pink-200: #f5b6cd; --epico-color-pink-300: #ffa6bf; --epico-color-pink-400: #ff6f95; --epico-color-pink-500: #f00d53; --epico-color-pink-600: #d90045; --epico-color-pink-700: #a60036; --epico-color-pink-950: #33111f; /* Color primitives — status. */ --epico-color-green-50: #ddf7ef; --epico-color-green-300: #63d9b4; --epico-color-green-700: #0b6f55; --epico-color-green-950: #0d2b23; --epico-color-amber-50: #fff1d0; --epico-color-amber-300: #f2bb52; --epico-color-amber-700: #8a5700; --epico-color-amber-950: #302307; --epico-color-red-50: #fde2e8; --epico-color-red-300: #ff8398; --epico-color-red-700: #a51d3d; --epico-color-red-950: #37151f; /* Shared dimension primitives. * size-1..4: fixed 4px grid. * size-5..12: 16px base, ratio 1.125 at 320px -> 1.2 at 1200px. */ --epico-size-caption: 0.875rem; --epico-size-1: 0.25rem; --epico-size-2: 0.5rem; --epico-size-3: 0.75rem; --epico-size-4: 1rem; --epico-size-5: clamp(1.125rem, 1.0977rem + 0.1364vw, 1.2rem); --epico-size-6: clamp(1.2656rem, 1.2022rem + 0.317vw, 1.44rem); --epico-size-7: clamp(1.4238rem, 1.3132rem + 0.553vw, 1.728rem); --epico-size-8: clamp(1.6018rem, 1.4302rem + 0.8578vw, 2.0736rem); --epico-size-9: clamp(1.802rem, 1.5525rem + 1.2478vw, 2.4883rem); --epico-size-10: clamp(2.0273rem, 1.6787rem + 1.7431vw, 2.986rem); --epico-size-11: clamp(2.2807rem, 1.8071rem + 2.3682vw, 3.5832rem); --epico-size-12: clamp(2.5658rem, 1.9352rem + 3.1528vw, 4.2998rem); --epico-size-13: clamp(2.8865rem, 2.0599rem + 4.1332vw, 5.1598rem); --epico-size-14: clamp(3.2473rem, 2.1766rem + 5.3535vw, 6.1917rem); --epico-size-15: clamp(3.6532rem, 2.2798rem + 6.867vw, 7.4301rem); /* Typography primitives. Font faces are declared in fonts.css. */ --epico-font-family-display: "Cal Sans", "Outfit", "Segoe UI", Helvetica, Arial, sans-serif; --epico-font-family-body: "Outfit", "Segoe UI", Helvetica, Arial, sans-serif; --epico-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --epico-font-weight-regular: 400; --epico-font-weight-medium: 500; --epico-font-weight-semibold: 600; --epico-font-weight-bold: 700; --epico-line-height-display: 1.1; --epico-line-height-h1: 1.15; --epico-line-height-h2: 1.25; --epico-line-height-h3: 1.3; --epico-line-height-compact: 1.4; --epico-line-height-body: 1.5; --epico-line-height-relaxed: 1.625; /* Shape, elevation and motion primitives. */ --epico-radius-xs: 0.25rem; --epico-radius-sm: 0.5rem; --epico-radius-md: 0.75rem; --epico-radius-lg: 1rem; --epico-radius-pill: 999px; /* * Shadow geometry is fixed; only the cast colour is theme-sensitive. * * `light-dark()` takes colours, not shadow values, so the shadow cannot be paired * as a whole. Splitting the colour out is what makes it themeable at all — and it * is the right split anyway: a blue-tinted shadow is invisible on a dark surface, * so depth there comes from a darker cast plus the lighter surface underneath. */ --epico-shadow-color-near: rgb(0 39 255 / 5%); --epico-shadow-color-far: rgb(0 39 255 / 6%); --epico-shadow-color-lg: rgba(10, 21, 82, 0.18); --epico-shadow-card-sm: 0 1px 2px var(--epico-shadow-color-near), 0 8px 24px var(--epico-shadow-color-far); --epico-shadow-lg: 0 20px 56px var(--epico-shadow-color-lg); --epico-duration-instant: 120ms; --epico-duration-fast: 180ms; --epico-duration-slow: 240ms; --epico-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* Semantic colors. */ --epico-color-surface-page: var(--epico-color-neutral-0); --epico-color-surface-base: var(--epico-color-neutral-0); --epico-color-surface-raised: var(--epico-color-neutral-0); --epico-color-surface-subtle: var(--epico-color-neutral-25); --epico-color-surface-disabled: var(--epico-color-neutral-100); --epico-color-surface-selected: var(--epico-color-pink-100); --epico-color-surface-brand: var(--epico-color-navy-900); --epico-color-surface-backdrop: rgba(10, 21, 82, 0.48); --epico-color-text-primary: var(--epico-color-neutral-900); --epico-color-text-secondary: var(--epico-color-neutral-650); --epico-color-text-muted: var(--epico-color-neutral-500); --epico-color-text-disabled: var(--epico-color-neutral-400); --epico-color-text-on-action: var(--epico-color-neutral-0); --epico-color-text-on-brand: var(--epico-color-neutral-0); --epico-color-text-link: var(--epico-color-blue-800); --epico-color-border-subtle: var(--epico-color-neutral-200); --epico-color-border-strong: var(--epico-color-neutral-300); --epico-color-border-control: var(--epico-color-neutral-450); --epico-color-action-primary: var(--epico-color-blue-600); --epico-color-action-primary-hover: var(--epico-color-blue-700); --epico-color-action-primary-active: var(--epico-color-blue-800); --epico-color-action-secondary: var(--epico-color-neutral-900); --epico-color-action-secondary-hover: var(--epico-color-blue-600); --epico-color-action-brand: var(--epico-color-pink-600); --epico-color-action-brand-hover: var(--epico-color-pink-700); --epico-color-action-danger: var(--epico-color-red-700); --epico-color-focus: var(--epico-color-blue-600); --epico-color-nav-active-surface: var(--epico-color-pink-100); --epico-color-nav-active-text: var(--epico-color-pink-500); --epico-color-nav-hover-surface: var(--epico-color-blue-50); --epico-color-info-surface: var(--epico-color-blue-100); --epico-color-info-text: var(--epico-color-blue-800); --epico-color-success-surface: var(--epico-color-green-50); --epico-color-success-text: var(--epico-color-green-700); --epico-color-warning-surface: var(--epico-color-amber-50); --epico-color-warning-text: var(--epico-color-amber-700); --epico-color-danger-surface: var(--epico-color-red-50); --epico-color-danger-text: var(--epico-color-red-700); --epico-color-neutral-state-surface: var(--epico-color-neutral-100); --epico-color-neutral-state-text: var(--epico-color-neutral-650); /* Semantic spacing aliases. */ --epico-space-2xs: var(--epico-size-1); --epico-space-xs: var(--epico-size-2); --epico-space-sm: var(--epico-size-3); --epico-space-md: var(--epico-size-4); --epico-space-lg: var(--epico-size-6); --epico-space-xl: var(--epico-size-8); --epico-space-2xl: var(--epico-size-10); --epico-space-3xl: var(--epico-size-12); --epico-space-4xl: var(--epico-size-13); --epico-space-5xl: var(--epico-size-14); --epico-space-6xl: var(--epico-size-15); --epico-space-page-inline: clamp(1rem, 0.4545rem + 2.7273vw, 2.5rem); /* Semantic typography aliases. */ --epico-font-display: var(--epico-font-family-display); --epico-font-body: var(--epico-font-family-body); --epico-font-technical: var(--epico-font-family-mono); --epico-font-weight-title: var(--epico-font-weight-semibold); --epico-font-size-caption: var(--epico-size-caption); --epico-font-size-body: var(--epico-size-4); --epico-font-size-label: var(--epico-size-4); --epico-font-size-lead: var(--epico-size-5); --epico-font-size-h3: var(--epico-size-6); --epico-font-size-h2: var(--epico-size-7); --epico-font-size-h1: var(--epico-size-8); --epico-font-size-display: var(--epico-size-9); --epico-measure-body: 66ch; --epico-measure-lead: 58ch; --epico-measure-heading: 28ch; --epico-letter-spacing-caps: 0.04em; --epico-link-underline-offset: 0.2em; /* Semantic layout aliases. */ --epico-layout-sidebar-width: 17.5rem; --epico-layout-topbar-height: 4.5rem; --epico-layout-content-max: 72rem; --epico-layout-touch-target: 2.75rem; --epico-layout-page-min-width: 20rem; --epico-grid-card-min: 18rem; --epico-layout-row-min-height: 3rem; /* Component tokens — shell and navigation. */ --epico-shell-background: var(--epico-color-surface-page); --epico-shell-brand-strip-width: 5px; --epico-brand-logo-max-width: 165px; --epico-sidebar-background: var(--epico-color-neutral-50); --epico-nav-item-min-height: 3rem; --epico-nav-item-radius: var(--epico-radius-pill); --epico-nav-item-gap: var(--epico-space-sm); --epico-nav-item-padding-inline: var(--epico-space-md); --epico-nav-active-background: var(--epico-color-nav-active-surface); --epico-nav-active-color: var(--epico-color-nav-active-text); --epico-topbar-background: var(--epico-color-surface-base); /* Component tokens — buttons. */ --epico-button-height-md: 3rem; --epico-button-padding-inline-md: var(--epico-space-lg); --epico-button-radius: var(--epico-radius-pill); --epico-button-font-size: var(--epico-font-size-body); --epico-button-font-weight: var(--epico-font-weight-semibold); --epico-icon-button-radius: var(--epico-radius-sm); /* Component tokens — fields. */ --epico-field-height: 3rem; --epico-field-background: var(--epico-color-surface-base); --epico-field-border: var(--epico-color-border-control); --epico-field-border-focus: var(--epico-color-focus); --epico-field-radius: var(--epico-radius-sm); --epico-field-padding-inline: var(--epico-space-md); /* Component tokens — cards and notices. */ --epico-card-background: var(--epico-color-surface-base); --epico-card-border: var(--epico-color-border-subtle); --epico-card-radius: var(--epico-radius-md); --epico-card-padding: var(--epico-space-lg); --epico-card-shadow: none; --epico-card-shadow-hover: var(--epico-shadow-card-sm); --epico-popover-shadow: var(--epico-shadow-lg); --epico-notice-radius: var(--epico-radius-md); --epico-notice-accent-width: 0.25rem; /* Component tokens — dashboard. */ --epico-dashboard-callout-gradient: radial-gradient(circle at right -185px top -65px, #1232e5 0%, #000c24 42%, #1f224a 65%, #53266a 95%, #63448c 100%); --epico-dashboard-callout-radius: var(--epico-radius-lg); /* * The badge sits on the gradient, so its contrast is measured against the gradient's * own stops — not against a flat surface. White 75% on a white 25% veil reached only * 3.07:1 at the outer stop and 3.89-4.27:1 across the band where the badge actually * renders, under the 4.5:1 AA needs for 14px bold. Solid white on a lighter 15% veil * clears it everywhere (5.25:1 worst case) and keeps the pill light. * Measured by `python3 tools/measure-contrast.py` — pair "callout: pastilha". */ --epico-dashboard-callout-badge-surface: var(--epico-color-transparent-light-15); --epico-dashboard-callout-badge-text: var(--epico-color-text-on-brand); --epico-dashboard-callout-ring-size: 23rem; --epico-dashboard-callout-ring-size-compact: 13rem; --epico-dashboard-summary-min-height: 9.5rem; /* * Letterbox behind a