/* ============================================================================ border-ds.css — CAMADA DE TOKENS do Design System da border ltd. GERADO por gen-tokens.py a partir de figma-tokens.export.txt (espelho do Figma). NÃO editar à mão — edite o Figma, rode o pull e o gerador. Valide com audit-tokens.py. Coleções espelhadas: base-tokens, theme, font-family, text styles, data-viz, motion. ============================================================================ */ /* ── FONTES (paths relativos a este arquivo) ─────────────────────────────── */ @font-face { font-family:"Helvetica Neue Custom"; ascent-override:81.1%; descent-override:21.3%; line-gap-override:0%; font-weight:400; font-style:normal; font-display:swap; src:url("/FONTES/HelveticaNeueRoman.woff2") format("woff2"); } @font-face { font-family:"Helvetica Neue Custom"; ascent-override:81.1%; descent-override:21.3%; line-gap-override:0%; font-weight:400; font-style:italic; font-display:swap; src:url("/FONTES/HelveticaNeueItalic.woff2") format("woff2"); } @font-face { font-family:"Helvetica Neue Custom"; ascent-override:81.1%; descent-override:21.3%; line-gap-override:0%; font-weight:500; font-style:normal; font-display:swap; src:url("/FONTES/HelveticaNeue-Medium.woff2") format("woff2"); } @font-face { font-family:"Helvetica Neue Custom"; ascent-override:81.1%; descent-override:21.3%; line-gap-override:0%; font-weight:700; font-style:normal; font-display:swap; src:url("/FONTES/HelveticaNeueBold.woff2") format("woff2"); } @font-face { font-family:"Helvetica Neue Custom"; ascent-override:81.1%; descent-override:21.3%; line-gap-override:0%; font-weight:700; font-style:italic; font-display:swap; src:url("/FONTES/HelveticaNeueBoldItalic.woff2") format("woff2"); } @font-face { font-family:"Times Border"; font-weight:400; font-style:normal; font-display:swap; src:url("/FONTES/Times New Roman.woff2") format("woff2"); } @font-face { font-family:"Times Border"; font-weight:400; font-style:italic; font-display:swap; src:url("/FONTES/Times New Roman Italic.woff2") format("woff2"); } @font-face { font-family:"Times Border"; font-weight:700; font-style:normal; font-display:swap; src:url("/FONTES/Times New Roman Bold.woff2") format("woff2"); } /* Roboto Mono: carregar via Google Fonts no (ver readme). */ :root { /* >>> primitivos + tipografia + viz + motion (literais/escala) >>> */ --color-brand-primary: #212121; --color-brand-secondary: #ffffff; --color-brand-tertiary-principal: #223a1d; --color-neutral-lightest: #f7f7f7; --color-neutral-light: #e0e0e0; --color-neutral-principal: #8a8a8a; --color-neutral-dark: #3d3d3d; --color-neutral-darkest: #0a0a0a; --color-feedback-danger-principal: #b71c1c; --color-feedback-success-principal: #1b5e20; --color-feedback-warning-principal: #ffc906; --color-shadow-soft: #2121210f; --color-shadow-medium: #2121211a; --radius-none: 0; --radius-small: 2px; --radius-medium: 4px; --radius-large: 8px; --radius-pill: 999px; --color-feedback-danger-dark: #8a1313; --color-brand-tertiary-dark: #16280f; --color-transparent: #00000000; --color-brand-tertiary-darkest: #0e1a0a; --color-brand-tertiary-light: #8fa886; --color-brand-tertiary-lightest: #dbe4d6; --color-feedback-danger-darkest: #5c0e0e; --color-feedback-danger-light: #e59a9a; --color-feedback-danger-lightest: #f7dad9; --color-feedback-success-dark: #134016; --color-feedback-success-darkest: #0a2a0d; --color-feedback-success-light: #9bcba0; --color-feedback-success-lightest: #d6ebd8; --color-feedback-warning-dark: #8a4b00; --color-feedback-warning-darkest: #5c3200; --color-feedback-warning-light: #f2b575; --color-feedback-warning-lightest: #fbe7cd; --stroke-focus: #0011ff; --spacing-stack-quarck: 4px; --spacing-stack-nano: 8px; --spacing-stack-xxxs: 16px; --spacing-stack-xxs: 24px; --spacing-stack-xs: 32px; --spacing-stack-sm: 40px; --spacing-stack-md: 48px; --spacing-stack-lg: 56px; --spacing-stack-xl: 64px; --spacing-stack-xxl: 80px; --spacing-stack-xxxl: 120px; --spacing-stack-huge: 160px; --spacing-stack-giant: 200px; --spacing-inset-quarck: 4px; --spacing-inset-nano: 8px; --spacing-inset-xs: 16px; --spacing-inset-sm: 24px; --spacing-inset-md: 32px; --spacing-inset-lg: 40px; --spacing-inline-quarck: 4px; --spacing-inline-nano: 8px; --spacing-inline-xxxs: 16px; --spacing-inline-xxs: 24px; --spacing-inline-xs: 32px; --spacing-inline-sm: 40px; --spacing-inline-md: 48px; --spacing-inline-lg: 64px; --spacing-inline-xl: 80px; --spacing-stack-micro: 2px; --spacing-stack-mini: 12px; --spacing-inset-micro: 2px; --spacing-inset-mini: 12px; --spacing-inline-micro: 2px; --spacing-inline-mini: 12px; --color-syntax-token: #c6227a; --color-neutral-text-secondary: #676767; --stroke-focus-inverse: #5a9bff; --color-brand-tertiary-hover: #1b3016; --color-feedback-danger-hover: #a11818; --color-neutral-inverse-muted: #a1a1a1; --color-background-overlay: #0a0a0a52; --font-family-mono: "Roboto Mono", "SF Mono", Monaco, monospace; --font-family-sans: "Helvetica Neue Custom", "Helvetica Neue", Arial, sans-serif; --font-family-serif: "Times Border", "Times New Roman", Times, serif; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-size-4xl: 32px; --font-size-5xl: 40px; --font-size-lg: 20px; --font-size-md: 16px; --font-size-sm: 14px; --font-size-xl: 20px; --font-size-xs: 12px; --font-weight-black: 900; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-italic: 400; --font-weight-light: 300; --font-weight-medium: 500; --font-weight-regular: 400; --font-line-height-code: 1.6; --font-line-height-loose: 1.55; --font-line-height-normal: 1.3; --font-line-height-relaxed: 1.45; --font-line-height-snug: 1.2; --font-line-height-tight: 1.05; --font-letter-spacing-normal: 0; --font-letter-spacing-tight: -0.005em; --font-letter-spacing-tighter: -0.01em; --font-letter-spacing-wide: 0.08em; --viz-categorical-1: #1e9e45; --viz-categorical-2: #2660e0; --viz-categorical-3: #f06a1e; --viz-categorical-4: #d11d6b; --viz-categorical-5: #f4b400; --viz-categorical-6: #7b3fe4; --viz-negative: #e5202e; --viz-neutral: #5f6b7a; --viz-positive: #1e9e45; --viz-sequential-1: #a7e9b8; --viz-sequential-2: #4fc36e; --viz-sequential-3: #1e9e45; --viz-sequential-4: #15722f; --viz-sequential-5: #0a3d19; --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* >>> theme (semânticos + por-componente + papéis de tipo) → aliases >>> */ --color-bg: var(--color-brand-secondary); --color-bg-muted: var(--color-neutral-lightest); --color-surface-accent: var(--color-brand-tertiary-principal); --color-text: var(--color-brand-primary); --color-text-sub: var(--color-neutral-dark); --color-text-helper: var(--color-neutral-text-secondary); --color-text-on-accent: var(--color-brand-secondary); --color-border: var(--color-neutral-light); --color-border-strong: var(--color-neutral-principal); --color-danger: var(--color-feedback-danger-principal); --color-success: var(--color-feedback-success-principal); --color-warning: var(--color-feedback-warning-principal); --color-text-inverse: var(--color-brand-secondary); --color-surface-dark: var(--color-neutral-darkest); --color-danger-strong: var(--color-feedback-danger-dark); --color-surface-accent-strong: var(--color-brand-tertiary-dark); --color-background-button-primary-enabled: var(--color-brand-primary); --color-background-button-primary-hover: var(--color-neutral-dark); --color-background-button-primary-focus: var(--color-brand-primary); --color-background-button-primary-active: var(--color-neutral-darkest); --color-background-button-primary-disabled: var(--color-neutral-light); --color-background-button-icon-enabled: var(--color-brand-primary); --color-background-button-icon-hover: var(--color-neutral-dark); --color-background-button-icon-focus: var(--color-brand-primary); --color-background-button-icon-active: var(--color-neutral-darkest); --color-background-button-icon-disabled: var(--color-neutral-light); --color-background-button-secondary-enabled: var(--color-bg); --color-background-button-secondary-hover: var(--color-bg-muted); --color-background-button-secondary-focus: var(--color-bg); --color-background-button-secondary-active: var(--color-neutral-light); --color-background-button-secondary-disabled: var(--color-bg); --color-background-button-cta-enabled: var(--color-surface-accent); --color-background-button-cta-hover: var(--color-brand-tertiary-hover); --color-background-button-cta-focus: var(--color-surface-accent); --color-background-button-cta-active: var(--color-surface-accent-strong); --color-background-button-cta-disabled: var(--color-neutral-light); --color-background-button-ghost-enabled: var(--color-transparent); --color-background-button-ghost-hover: var(--color-bg-muted); --color-background-button-ghost-focus: var(--color-transparent); --color-background-button-ghost-active: var(--color-neutral-light); --color-background-button-ghost-disabled: var(--color-transparent); --color-background-button-destructive-enabled: var(--color-danger); --color-background-button-destructive-hover: var(--color-feedback-danger-hover); --color-background-button-destructive-focus: var(--color-danger); --color-background-button-destructive-active: var(--color-danger-strong); --color-background-button-destructive-disabled: var(--color-neutral-light); --color-icon-button-primary-enabled: var(--color-text-inverse); --color-icon-button-primary-disabled: var(--color-neutral-principal); --color-stroke-button-primary-focus: var(--stroke-focus); --color-icon-button-icon-enabled: var(--color-text-inverse); --color-icon-button-icon-disabled: var(--color-neutral-principal); --color-stroke-button-icon-focus: var(--stroke-focus); --color-icon-button-secondary-enabled: var(--color-brand-primary); --color-icon-button-secondary-disabled: var(--color-neutral-principal); --color-stroke-button-secondary-focus: var(--stroke-focus); --color-icon-button-ghost-enabled: var(--color-brand-primary); --color-icon-button-ghost-disabled: var(--color-neutral-principal); --color-stroke-button-ghost-focus: var(--stroke-focus); --color-icon-button-cta-enabled: var(--color-text-on-accent); --color-icon-button-cta-disabled: var(--color-neutral-principal); --color-stroke-button-cta-focus: var(--stroke-focus); --color-icon-button-destructive-enabled: var(--color-text-inverse); --color-icon-button-destructive-disabled: var(--color-neutral-principal); --color-stroke-button-destructive-focus: var(--stroke-focus); --color-stroke-button-secondary-enabled: var(--color-brand-primary); --color-background-input-enabled: var(--color-bg); --color-background-input-focus: var(--color-bg); --color-background-input-filled: var(--color-bg); --color-background-input-error: var(--color-bg); --color-background-input-warning: var(--color-bg); --color-background-input-readonly: var(--color-bg-muted); --color-background-input-disabled: var(--color-bg-muted); --color-border-input-enabled: var(--color-border-strong); --color-border-input-filled: var(--color-neutral-darkest); --color-border-input-error: var(--color-danger); --color-border-input-warning: var(--color-warning); --color-border-input-readonly: var(--color-border); --color-border-input-disabled: var(--color-neutral-light); --color-icon-input-enabled: var(--color-text-sub); --color-icon-input-disabled: var(--color-text-helper); --color-background-checkbox-off: var(--color-bg); --color-border-checkbox-off: var(--color-border-strong); --color-background-checkbox-on: var(--color-brand-primary); --color-icon-checkbox-on: var(--color-brand-secondary); --color-background-checkbox-indeterminate: var(--color-brand-primary); --color-background-checkbox-focus: var(--color-bg); --color-border-checkbox-focus: var(--stroke-focus); --color-background-checkbox-disabled: var(--color-bg-muted); --color-border-checkbox-disabled: var(--color-border); --color-background-checkbox-error: var(--color-bg); --color-border-checkbox-error: var(--color-danger); --color-background-checkbox-warning: var(--color-bg); --color-border-checkbox-warning: var(--color-warning); --color-background-checkbox-readonly: var(--color-neutral-light); --color-border-checkbox-readonly: var(--color-border); --color-icon-checkbox-readonly: var(--color-text-sub); --color-background-radio-off: var(--color-bg); --color-border-radio-off: var(--color-border-strong); --color-background-radio-on: var(--color-bg); --color-border-radio-on: var(--color-brand-primary); --color-background-radio-ellipse-on: var(--color-brand-primary); --color-background-radio-focus: var(--color-bg); --color-border-radio-focus: var(--stroke-focus); --color-background-radio-disabled: var(--color-bg-muted); --color-border-radio-disabled: var(--color-border); --color-background-radio-error: var(--color-bg); --color-border-radio-error: var(--color-danger); --color-background-radio-warning: var(--color-bg); --color-border-radio-warning: var(--color-warning); --color-background-radio-readonly: var(--color-bg); --color-border-radio-readonly: var(--color-border); --color-background-radio-ellipse-readonly: var(--color-text-sub); --color-background-switch-track-off: var(--color-neutral-principal); --color-background-switch-thumb-off: var(--color-brand-secondary); --color-background-switch-track-on: var(--color-brand-tertiary-principal); --color-background-switch-thumb-on: var(--color-brand-secondary); --color-background-switch-track-disabled: var(--color-neutral-light); --color-background-switch-thumb-disabled: var(--color-brand-secondary); --color-border-link-focus-light: var(--stroke-focus); --color-border-link-focus-dark: var(--stroke-focus-inverse); --color-background-dropdown-field-closed-dropdown: var(--color-bg-muted); --color-border-dropdown-field-closed-dropdown: var(--color-border-strong); --color-icon-dropdown-closed-dropdown: var(--color-text-sub); --color-background-dropdown-field-focus-dropdown: var(--color-bg-muted); --color-border-dropdown-field-focus-dropdown: var(--stroke-focus); --color-icon-dropdown-focus-dropdown: var(--color-text-sub); --color-background-dropdown-field-open-dropdown: var(--color-bg-muted); --color-border-dropdown-field-open-dropdown: var(--stroke-focus); --color-icon-dropdown-open-dropdown: var(--color-text-sub); --color-background-dropdown-menu-open-dropdown: var(--color-bg); --color-border-dropdown-menu-open-dropdown: var(--color-border); --color-background-dropdown-option-open-dropdown: var(--color-bg-muted); --color-icon-dropdown-check-open-dropdown: var(--color-text); --color-background-dropdown-field-error-dropdown: var(--color-bg-muted); --color-border-dropdown-field-error-dropdown: var(--color-danger); --color-icon-dropdown-error-dropdown: var(--color-text-sub); --color-background-dropdown-field-disabled-dropdown: var(--color-bg-muted); --color-border-dropdown-field-disabled-dropdown: var(--color-border-strong); --color-icon-dropdown-disabled-dropdown: var(--color-text-sub); --color-background-dropdown-field-warning-dropdown: var(--color-bg-muted); --color-border-dropdown-field-warning-dropdown: var(--color-warning); --color-icon-dropdown-warning-dropdown: var(--color-text-sub); --color-background-dropdown-field-readonly-dropdown: var(--color-bg); --color-border-dropdown-field-readonly-dropdown: var(--color-border); --color-icon-dropdown-readonly-dropdown: var(--color-text-helper); --color-background-dropdown-field-open-combo-box: var(--color-bg-muted); --color-border-dropdown-field-open-combo-box: var(--stroke-focus); --color-icon-dropdown-clear-open-combo-box: var(--color-text-sub); --color-icon-dropdown-open-combo-box: var(--color-text-sub); --color-background-dropdown-menu-open-combo-box: var(--color-bg); --color-border-dropdown-menu-open-combo-box: var(--color-border); --color-background-dropdown-option-open-combo-box: var(--color-bg-muted); --color-icon-dropdown-check-open-combo-box: var(--color-text); --color-background-dropdown-field-closed-combo-box: var(--color-bg-muted); --color-border-dropdown-field-closed-combo-box: var(--color-border-strong); --color-icon-dropdown-closed-combo-box: var(--color-text-sub); --color-background-dropdown-field-open-multiselect: var(--color-bg-muted); --color-border-dropdown-field-open-multiselect: var(--stroke-focus); --color-background-dropdown-counter-open-multiselect: var(--color-neutral-dark); --color-icon-dropdown-open-multiselect: var(--color-text-sub); --color-background-dropdown-menu-open-multiselect: var(--color-bg); --color-border-dropdown-menu-open-multiselect: var(--color-border); --color-background-dropdown-box-open-multiselect: var(--color-bg); --color-background-dropdown-option-open-multiselect: var(--color-bg-muted); --color-border-dropdown-box-open-multiselect: var(--color-border-strong); --color-background-dropdown-field-closed-multiselect: var(--color-bg-muted); --color-border-dropdown-field-closed-multiselect: var(--color-border-strong); --color-background-dropdown-counter-closed-multiselect: var(--color-neutral-dark); --color-icon-dropdown-closed-multiselect: var(--color-text-sub); --color-background-textarea-default: var(--color-bg); --color-border-textarea-default: var(--color-border-strong); --color-background-textarea-focus: var(--color-bg); --color-border-textarea-focus: var(--color-neutral-darkest); --color-background-textarea-filled: var(--color-bg); --color-border-textarea-filled: var(--color-neutral-darkest); --color-background-textarea-error: var(--color-bg); --color-border-textarea-error: var(--color-danger); --color-background-textarea-disabled: var(--color-bg-muted); --color-border-textarea-disabled: var(--color-border-strong); --color-background-textarea-warning: var(--color-bg); --color-border-textarea-warning: var(--color-warning); --color-background-textarea-readonly: var(--color-bg-muted); --color-border-textarea-readonly: var(--color-border); --color-background-banner-neutral-low: var(--color-bg-muted); --color-border-banner-neutral-low: var(--color-border); --color-background-banner-bar-neutral-low: var(--color-border-strong); --color-background-banner-dot-neutral-low: var(--color-border-strong); --color-icon-banner-neutral-low: var(--color-text); --color-background-banner-success-low: var(--color-feedback-success-lightest); --color-border-banner-success-low: var(--color-border); --color-background-banner-bar-success-low: var(--color-success); --color-background-banner-dot-success-low: var(--color-success); --color-icon-banner-success-low: var(--color-feedback-success-principal); --color-background-banner-warning-low: var(--color-feedback-warning-lightest); --color-border-banner-warning-low: var(--color-border); --color-background-banner-bar-warning-low: var(--color-warning); --color-background-banner-dot-warning-low: var(--color-warning); --color-icon-banner-warning-low: var(--color-feedback-warning-dark); --color-background-banner-error-low: var(--color-feedback-danger-lightest); --color-border-banner-error-low: var(--color-border); --color-background-banner-bar-error-low: var(--color-danger); --color-background-banner-dot-error-low: var(--color-danger); --color-icon-banner-error-low: var(--color-feedback-danger-principal); --color-background-banner-brand-low: var(--color-surface-accent); --color-background-banner-bar-brand-low: var(--color-bg); --color-background-banner-dot-brand-low: var(--color-bg); --color-icon-banner-brand-low: var(--color-text-on-accent); --color-background-banner-neutral-high: var(--color-surface-dark); --color-border-banner-neutral-high: var(--color-border); --color-background-banner-bar-neutral-high: var(--color-border-strong); --color-background-banner-dot-neutral-high: var(--color-border-strong); --color-icon-banner-neutral-high: var(--color-text-inverse); --color-background-banner-success-high: var(--color-surface-dark); --color-border-banner-success-high: var(--color-border); --color-background-banner-bar-success-high: var(--color-success); --color-background-banner-dot-success-high: var(--color-success); --color-icon-banner-success-high: var(--color-text-inverse); --color-background-banner-warning-high: var(--color-surface-dark); --color-border-banner-warning-high: var(--color-border); --color-background-banner-bar-warning-high: var(--color-warning); --color-background-banner-dot-warning-high: var(--color-warning); --color-icon-banner-warning-high: var(--color-text-inverse); --color-background-banner-error-high: var(--color-surface-dark); --color-border-banner-error-high: var(--color-border); --color-background-banner-bar-error-high: var(--color-danger); --color-background-banner-dot-error-high: var(--color-danger); --color-icon-banner-error-high: var(--color-text-inverse); --color-background-banner-brand-high: var(--color-surface-dark); --color-background-banner-bar-brand-high: var(--color-bg); --color-background-banner-dot-brand-high: var(--color-bg); --color-icon-banner-brand-high: var(--color-text-inverse); --color-background-toast-success: var(--color-surface-dark); --color-background-toast-dot-success: var(--color-success); --color-background-toast-error: var(--color-surface-dark); --color-background-toast-dot-error: var(--color-danger); --color-background-toast-warning: var(--color-surface-dark); --color-background-toast-dot-warning: var(--color-warning); --color-background-toast-info: var(--color-surface-dark); --color-background-toast-dot-info: var(--color-border-strong); --color-background-card-default: var(--color-bg); --color-border-card-default: var(--color-border); --color-background-card-highlight: var(--color-surface-accent); --color-background-card-dark: var(--color-surface-dark); --color-background-card-flat: var(--color-bg); --color-border-card-flat: var(--color-border); --color-background-voice-accent: var(--color-surface-accent); --color-background-voice-light: var(--color-bg); --color-border-voice-light: var(--color-border); --color-background-voice-bar-inline: var(--color-surface-accent); --color-background-tabs-underline-line: var(--color-brand-primary); --color-background-tabs-tab-contained: var(--color-bg); --color-border-tabs-contained: var(--color-border); --color-background-tabs-underline-contained: var(--color-brand-primary); --color-background-tooltip-top: var(--color-surface-dark); --color-background-tooltip-arrow-top: var(--color-surface-dark); --color-background-tooltip-bottom: var(--color-surface-dark); --color-background-tooltip-arrow-bottom: var(--color-surface-dark); --color-background-tooltip-left: var(--color-surface-dark); --color-background-tooltip-arrow-left: var(--color-surface-dark); --color-background-tooltip-right: var(--color-surface-dark); --color-background-tooltip-arrow-right: var(--color-surface-dark); --color-background-accordion-md: var(--color-bg); --color-border-accordion-md: var(--color-border); --color-border-accordion-item-md: var(--color-border); --color-icon-accordion-md: var(--color-text-sub); --color-background-accordion-sm: var(--color-bg); --color-border-accordion-sm: var(--color-border); --color-border-accordion-item-sm: var(--color-border); --color-icon-accordion-sm: var(--color-text-sub); --color-background-accordion-lg: var(--color-bg); --color-border-accordion-lg: var(--color-border); --color-border-accordion-item-lg: var(--color-border); --color-icon-accordion-lg: var(--color-text-sub); --color-background-stepper-sm-default: var(--color-bg); --color-border-stepper-sm-default: var(--color-border-strong); --color-icon-stepper-sm-default: var(--color-text); --color-background-stepper-divider-sm-default: var(--color-border-strong); --color-background-stepper-sm-disabled: var(--color-bg-muted); --color-border-stepper-sm-disabled: var(--color-border); --color-icon-stepper-sm-disabled: var(--color-text-helper); --color-background-stepper-divider-sm-disabled: var(--color-border); --color-background-stepper-md-default: var(--color-bg); --color-border-stepper-md-default: var(--color-border-strong); --color-icon-stepper-md-default: var(--color-text); --color-background-stepper-divider-md-default: var(--color-border-strong); --color-background-stepper-md-disabled: var(--color-bg-muted); --color-border-stepper-md-disabled: var(--color-border); --color-icon-stepper-md-disabled: var(--color-text-helper); --color-background-stepper-divider-md-disabled: var(--color-border); --color-background-stepper-lg-default: var(--color-bg); --color-border-stepper-lg-default: var(--color-border-strong); --color-icon-stepper-lg-default: var(--color-text); --color-background-stepper-divider-lg-default: var(--color-border-strong); --color-background-stepper-lg-disabled: var(--color-bg-muted); --color-border-stepper-lg-disabled: var(--color-border); --color-icon-stepper-lg-disabled: var(--color-text-helper); --color-background-stepper-divider-lg-disabled: var(--color-border); --color-background-dialog-window-default-md: var(--color-bg); --color-icon-dialog-default-md: var(--color-text-helper); --color-background-dialog-cancel-default-md: var(--color-background-button-ghost-enabled); --color-background-dialog-confirm-default-md: var(--color-background-button-primary-enabled); --color-background-dialog-window-default-sm: var(--color-bg); --color-icon-dialog-default-sm: var(--color-text-helper); --color-background-dialog-cancel-default-sm: var(--color-background-button-ghost-enabled); --color-background-dialog-confirm-default-sm: var(--color-background-button-primary-enabled); --color-background-dialog-window-default-lg: var(--color-bg); --color-icon-dialog-default-lg: var(--color-text-helper); --color-background-dialog-cancel-default-lg: var(--color-background-button-ghost-enabled); --color-background-dialog-confirm-default-lg: var(--color-background-button-primary-enabled); --color-background-dialog-window-danger-sm: var(--color-bg); --color-icon-dialog-danger-sm: var(--color-text-helper); --color-background-dialog-cancel-danger-sm: var(--color-background-button-ghost-enabled); --color-background-dialog-confirm-danger-sm: var(--color-background-button-destructive-enabled); --color-background-dialog-window-danger-md: var(--color-bg); --color-icon-dialog-danger-md: var(--color-text-helper); --color-background-dialog-cancel-danger-md: var(--color-background-button-ghost-enabled); --color-background-dialog-confirm-danger-md: var(--color-background-button-destructive-enabled); --color-background-dialog-window-danger-lg: var(--color-bg); --color-icon-dialog-danger-lg: var(--color-text-helper); --color-background-dialog-cancel-danger-lg: var(--color-background-button-ghost-enabled); --color-background-dialog-confirm-danger-lg: var(--color-background-button-destructive-enabled); --color-background-menu-enabled: var(--color-bg); --color-border-menu-enabled: var(--color-border); --color-background-menu-item-enabled: var(--color-bg-muted); --color-icon-menu-check-enabled: var(--color-text); --color-icon-menu-submenu-enabled: var(--color-text-sub); --color-background-menu-divider-enabled: var(--color-border); --color-background-header-enabled: var(--color-bg); --color-border-header-enabled: var(--color-border); --color-background-header-login-enabled: var(--color-background-button-secondary-enabled); --color-border-header-login-enabled: var(--color-stroke-button-secondary-enabled); --color-background-footer-enabled: var(--color-surface-dark); --color-background-footer-divider-enabled: var(--color-border); --color-background-empty-state-illustration-enabled: var(--color-bg-muted); --color-border-empty-state-enabled: var(--color-border); --color-background-empty-state-action-enabled: var(--color-background-button-primary-enabled); --color-background-product-card-enabled: var(--color-bg); --color-border-product-card-enabled: var(--color-border); --color-background-product-card-image-enabled: var(--color-bg-muted); --color-border-product-card-image-enabled: var(--color-border); --color-background-product-card-star-enabled: var(--color-neutral-text-secondary); --color-background-product-card-action-enabled: var(--color-background-button-primary-enabled); --color-border-cart-item-enabled: var(--color-border); --color-background-cart-item-thumbnail-enabled: var(--color-bg-muted); --color-border-cart-item-thumbnail-enabled: var(--color-border); --color-background-cart-item-quantity-enabled: var(--color-background-stepper-sm-default); --color-border-cart-item-quantity-enabled: var(--color-border-stepper-sm-default); --color-background-filters-enabled: var(--color-bg); --color-border-filters-enabled: var(--color-border); --color-background-filters-chip-enabled: var(--color-bg); --color-border-filters-chip-enabled: var(--color-neutral-principal); --color-background-filters-divider-enabled: var(--color-border); --color-background-filters-track-enabled: var(--color-border); --color-background-filters-track-active-enabled: var(--color-brand-primary); --color-background-filters-handle-enabled: var(--color-bg); --color-border-filters-handle-enabled: var(--color-brand-primary); --color-background-pagination-selector-enabled: var(--color-bg); --color-border-pagination-enabled: var(--color-border); --color-icon-pagination-enabled: var(--color-text-sub); --color-background-pagination-divider-enabled: var(--color-border); --color-background-pagination-pages-enabled: var(--color-brand-primary); --color-background-search-enabled: var(--color-background-button-primary-enabled); --color-background-form-enabled: var(--color-bg); --color-border-form-enabled: var(--color-border); --color-background-form-submit-enabled: var(--color-background-button-primary-enabled); --color-background-tabs-legacy-line: var(--color-background-tabs-underline-line); --color-icon-spinner-light: var(--color-brand-primary); --color-icon-spinner-dark: var(--color-brand-secondary); --color-background-skeleton-base: var(--color-neutral-light); --color-background-skeleton-shimmer: var(--color-neutral-principal); --color-background-progress-bar-track: var(--color-neutral-light); --color-background-progress-bar-fill-default: var(--color-brand-primary); --color-background-progress-bar-fill-success: var(--color-feedback-success-principal); --color-background-progress-bar-fill-error: var(--color-feedback-danger-principal); --color-background-step-done: var(--color-brand-primary); --color-background-step-current: var(--color-brand-primary); --color-background-step-pending: var(--color-bg); --color-border-step-pending: var(--color-border-strong); --color-icon-step-done: var(--color-brand-secondary); --color-background-step-connector: var(--color-neutral-principal); --color-tag-neutral-bg: var(--color-neutral-light); --color-tag-neutral-fg: var(--color-neutral-dark); --color-tag-success-bg: var(--color-feedback-success-lightest); --color-tag-success-fg: var(--color-feedback-success-principal); --color-tag-danger-bg: var(--color-feedback-danger-lightest); --color-tag-danger-fg: var(--color-feedback-danger-principal); --color-tag-warning-bg: var(--color-feedback-warning-lightest); --color-tag-warning-fg: var(--color-feedback-warning-dark); --color-tag-brand-bg: var(--color-brand-tertiary-lightest); --color-tag-brand-fg: var(--color-brand-tertiary-principal); --color-background-content-switcher-selected: var(--color-text); --color-background-content-switcher: var(--color-text-inverse); --color-border-content-switcher: var(--color-border); --color-background-content-switcher-disabled: var(--color-bg-muted); --color-background-image-placeholder: var(--color-bg-muted); --color-background-slider-track: var(--color-border); --color-background-slider-fill: var(--color-text); --color-background-slider-handle: var(--color-text); --color-background-slider-handle-disabled: var(--color-border); --color-background-popover: var(--color-text-inverse); --color-border-popover: var(--color-border); --color-background-popover-arrow: var(--color-bg); --color-background-date-picker: var(--color-text-inverse); --color-background-date-picker-selected: var(--color-text); --color-border-date-picker-today: var(--color-surface-accent); --color-background-drawer: var(--color-text-inverse); --color-border-drawer: var(--color-border); --color-background-file-uploader: var(--color-bg-muted); --color-border-file-uploader: var(--color-border-strong); --color-background-file-uploader-active: var(--color-surface-accent); --color-border-file-uploader-active: var(--color-surface-accent); --color-icon-file-uploader-success: var(--color-surface-accent); --color-icon-file-uploader-error: var(--color-danger); --color-border-file-uploader-error: var(--color-danger); --color-stroke-slider-focus: var(--stroke-focus); --color-text-error: var(--color-feedback-danger-principal); --color-text-warning: var(--color-feedback-warning-dark); --color-text-success: var(--color-feedback-success-principal); --color-icon-default: var(--color-text); --color-icon-negative: var(--color-text-inverse); --color-icon-accent: var(--color-surface-accent); --color-icon-error: var(--color-danger); --color-icon-warning: var(--color-feedback-warning-dark); --color-icon-success: var(--color-success); --color-text-primary: var(--color-neutral-darkest); --color-text-secondary: var(--color-neutral-dark); --color-text-disabled: var(--color-neutral-principal); --color-text-on-brand: var(--color-brand-secondary); --color-text-link: var(--color-brand-tertiary-principal); --color-focus-ring: var(--stroke-focus); --color-focus-ring-inverse: var(--stroke-focus-inverse); --color-text-inverse-muted: var(--color-neutral-inverse-muted); --font-family-body: var(--font-family-sans); --font-family-button: var(--font-family-sans); --font-family-caption: var(--font-family-sans); --font-family-headings: var(--font-family-sans); --font-family-input-placeholder: var(--font-family-sans); --font-family-input-text: var(--font-family-sans); --font-family-label: var(--font-family-sans); --font-family-numbers: var(--font-family-mono); --font-family-overline: var(--font-family-sans); --font-family-tab: var(--font-family-sans); --font-family-voice: var(--font-family-serif); --viz-axis: var(--color-border-strong); --viz-grid: var(--color-border); /* ── Estáticos (não são variáveis no Figma) ───────────────────────────── */ /* Sombras (effect styles compostos sobre os primitivos de cor de sombra) */ --shadow-soft: 0 1px 2px var(--color-shadow-soft); --shadow-medium: 0 4px 12px var(--color-shadow-medium); --shadow-button: 0 4px 12px var(--color-shadow-medium); /* Elevação (Figma elevation/1–5 — dual-shadow, preto puro) */ --elevation-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04); --elevation-2: 0 2px 6px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); --elevation-3: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06); --elevation-4: 0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); --elevation-5: 0 16px 48px rgba(0,0,0,.16), 0 8px 16px rgba(0,0,0,.08); /* Motion: alias de compat → token motion/ease-out (gerado da coleção motion) */ --ease: var(--motion-ease-out); /* Aliases legados (compat — remover quando os sites migrarem) */ --color-surface-green: var(--color-surface-accent); --color-text-on-green: var(--color-brand-secondary); --color-green-strong: var(--color-brand-tertiary-dark); --color-brand-accent: var(--color-feedback-danger-principal); } /* ── Tipografia responsiva: modo web (≥ 768px); base = mobile ───────────── */ @media (min-width: 768px) { :root { --font-size-2xl: 32px; --font-size-3xl: 40px; --font-size-4xl: 48px; --font-size-5xl: 56px; --font-size-xl: 24px; } } /* ── RAMP TIPOGRÁFICA (text styles do Figma → classes) ───────────────────── */ .ds-h1 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-5xl); line-height: 1.08; letter-spacing: -0.02em; } .ds-h2 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-4xl); line-height: 1.10; letter-spacing: -0.015em; } .ds-h3 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-3xl); line-height: 1.14; letter-spacing: -0.01em; } .ds-h4 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-2xl); line-height: 1.18; letter-spacing: -0.005em; } .ds-h5 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); line-height: 1.20; } .ds-h6 { font-family: var(--font-family-headings); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.22; } .ds-body { font-family: var(--font-family-body); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.55; } .ds-caption { font-family: var(--font-family-caption); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); line-height: 1.45; } .ds-label { font-family: var(--font-family-label); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); line-height: 1.20; letter-spacing: 0.08em; } .ds-label-tag { font-family: var(--font-family-label); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); line-height: 1.20; letter-spacing: 0.04em; text-transform: uppercase; } /* rótulo da família de indicadores (Tag + Delta): label com tracking 0,04em */ .ds-overline { font-family: var(--font-family-overline); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); line-height: 1.20; letter-spacing: 0.08em; text-transform: uppercase; } .ds-button { font-family: var(--font-family-button); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.20; } .ds-input-text { font-family: var(--font-family-input-text); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: 1.30; } .ds-data { font-family: var(--font-family-numbers); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1.60; } .ds-voice { font-family: var(--font-family-voice); font-weight: var(--font-weight-regular); font-style: italic; font-size: var(--font-size-2xl); line-height: 1.30; } .ds-tab-active { font-family: var(--font-family-tab); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); line-height: 1.20; } .ds-tab-inactive{ font-family: var(--font-family-tab); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1.20; }