/* * Atacadao LED - Design Tokens v1.0.0 * Fonte: tokens/src/atacadao-led.tokens.json * Data declarada: 2026-07-13 * Gerado automaticamente. Nao editar manualmente. */ :root { /* Modern Atacadao LED tokens */ --aled-primitive-border-default: 1px solid #E3EDF1; --aled-primitive-border-focus: 3px solid #43D2D8; --aled-primitive-breakpoint-compact: 640px; --aled-primitive-breakpoint-navigation: 900px; --aled-primitive-breakpoint-wide: 1120px; --aled-primitive-color-brand-cyan-dark: #0FA8D9; --aled-primitive-color-brand-deep: #03202D; --aled-primitive-color-brand-ice: #D4E3E8; --aled-primitive-color-brand-night: #011C25; --aled-primitive-color-brand-petrol: #053041; --aled-primitive-color-brand-petrol-700: #06364A; --aled-primitive-color-brand-slate: #4A798D; --aled-primitive-color-brand-steel: #154E69; --aled-primitive-color-feedback-alert: #FF6B6B; --aled-primitive-color-feedback-error: #B33A3A; --aled-primitive-color-light-cyan: #16BDF5; --aled-primitive-color-light-green: #5BE9A2; --aled-primitive-color-light-turquoise: #43D2D8; --aled-primitive-color-neutral-black: #0A0F12; --aled-primitive-color-neutral-white: #FFFFFF; --aled-primitive-color-surface-line: #E3EDF1; --aled-primitive-color-surface-mist: #F0F6F8; --aled-primitive-color-surface-paper: #FAFCFD; --aled-primitive-color-text-muted: #5A7280; --aled-primitive-color-text-soft: #3D5866; --aled-primitive-dimension-border-focus: 3px; --aled-primitive-dimension-border-thin: 1px; --aled-primitive-dimension-layout-brandbook-content-max: 1060px; --aled-primitive-dimension-layout-brandbook-sidebar: 264px; --aled-primitive-dimension-layout-topbar-height: 38px; --aled-primitive-dimension-layout-wrap: 1240px; --aled-primitive-gradient-diagonal: linear-gradient(135deg, #5BE9A2 0%, #43D2D8 50%, #16BDF5 100%); --aled-primitive-gradient-horizontal: linear-gradient(90deg, #5BE9A2 0%, #43D2D8 50%, #16BDF5 100%); --aled-primitive-motion-duration-deliberate: 400ms; --aled-primitive-motion-duration-fast: 150ms; --aled-primitive-motion-duration-standard: 200ms; --aled-primitive-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --aled-primitive-opacity-disabled: 0.5; --aled-primitive-radius-control: 12px; --aled-primitive-radius-md: 16px; --aled-primitive-radius-pill: 999px; --aled-primitive-radius-sm: 8px; --aled-primitive-shadow-button: 0 8px 24px 0 rgba(3, 32, 45, 0.24); --aled-primitive-shadow-card: 0 8px 24px 0 rgba(3, 32, 45, 0.12); --aled-primitive-spacing-2xl: 48px; --aled-primitive-spacing-3xl: 64px; --aled-primitive-spacing-lg: 24px; --aled-primitive-spacing-md: 16px; --aled-primitive-spacing-none: 0; --aled-primitive-spacing-sm: 8px; --aled-primitive-spacing-xl: 32px; --aled-primitive-spacing-xs: 4px; --aled-primitive-typography-body: 400 16px/1.65 Sora, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --aled-primitive-typography-family-brand: Sora, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --aled-primitive-typography-letter-spacing-default: 0; --aled-primitive-typography-line-height-body: 1.65; --aled-primitive-typography-size-body: 16px; --aled-primitive-typography-weight-bold: 700; --aled-primitive-typography-weight-extrabold: 800; --aled-primitive-typography-weight-light: 300; --aled-primitive-typography-weight-medium: 500; --aled-primitive-typography-weight-regular: 400; --aled-primitive-typography-weight-semibold: 600; --aled-primitive-z-index-accessibility: 500; --aled-primitive-z-index-content: 1; --aled-primitive-z-index-navigation: 100; --aled-primitive-z-index-overlay: 400; /* Light semantics */ --aled-component-badge-background: var(--aled-semantic-feedback-success-background); --aled-component-badge-foreground: var(--aled-semantic-feedback-success-foreground); --aled-component-badge-radius: var(--aled-primitive-radius-pill); --aled-component-button-primary-background: var(--aled-semantic-action-primary-background); --aled-component-button-primary-border: var(--aled-semantic-border-accent); --aled-component-button-primary-foreground: var(--aled-semantic-action-primary-foreground); --aled-component-button-primary-radius: var(--aled-primitive-radius-control); --aled-component-button-primary-shadow: var(--aled-primitive-shadow-button); --aled-component-button-secondary-background: var(--aled-semantic-action-secondary-background); --aled-component-button-secondary-border: var(--aled-semantic-border-strong); --aled-component-button-secondary-foreground: var(--aled-semantic-action-secondary-foreground); --aled-component-button-secondary-radius: var(--aled-primitive-radius-control); --aled-component-card-background: var(--aled-semantic-surface-primary); --aled-component-card-border: var(--aled-semantic-border-default); --aled-component-card-foreground: var(--aled-semantic-text-primary); --aled-component-card-radius: var(--aled-primitive-radius-md); --aled-component-card-shadow: var(--aled-primitive-shadow-card); --aled-component-input-background: var(--aled-semantic-surface-primary); --aled-component-input-border: var(--aled-semantic-border-default); --aled-component-input-focus-border: var(--aled-semantic-focus-ring); --aled-component-input-foreground: var(--aled-semantic-text-primary); --aled-component-input-placeholder: var(--aled-semantic-text-muted); --aled-component-input-radius: var(--aled-primitive-radius-control); --aled-semantic-action-link: var(--aled-primitive-color-brand-petrol-700); --aled-semantic-action-primary-background: var(--aled-primitive-gradient-horizontal); --aled-semantic-action-primary-foreground: var(--aled-primitive-color-brand-deep); --aled-semantic-action-secondary-background: var(--aled-primitive-color-brand-petrol); --aled-semantic-action-secondary-foreground: var(--aled-primitive-color-neutral-white); --aled-semantic-background-brand: var(--aled-primitive-color-brand-petrol); --aled-semantic-background-canvas: var(--aled-primitive-color-surface-paper); --aled-semantic-background-inverse: var(--aled-primitive-color-brand-deep); --aled-semantic-border-accent: var(--aled-primitive-color-brand-petrol-700); --aled-semantic-border-default: var(--aled-primitive-color-surface-line); --aled-semantic-border-strong: var(--aled-primitive-color-brand-ice); --aled-semantic-disabled-background: var(--aled-primitive-color-brand-ice); --aled-semantic-disabled-foreground: var(--aled-primitive-color-brand-slate); --aled-semantic-disabled-opacity: var(--aled-primitive-opacity-disabled); --aled-semantic-feedback-error-background: var(--aled-primitive-color-feedback-error); --aled-semantic-feedback-error-foreground: var(--aled-primitive-color-neutral-white); --aled-semantic-feedback-success-background: var(--aled-primitive-color-light-green); --aled-semantic-feedback-success-foreground: var(--aled-primitive-color-brand-night); --aled-semantic-focus-ring: var(--aled-primitive-color-brand-petrol-700); --aled-semantic-icon-accent: var(--aled-primitive-color-brand-petrol-700); --aled-semantic-icon-inverse: var(--aled-primitive-color-neutral-white); --aled-semantic-icon-primary: var(--aled-primitive-color-brand-petrol); --aled-semantic-icon-secondary: var(--aled-primitive-color-brand-steel); --aled-semantic-surface-elevated: var(--aled-primitive-color-neutral-white); --aled-semantic-surface-primary: var(--aled-primitive-color-neutral-white); --aled-semantic-surface-secondary: var(--aled-primitive-color-surface-mist); --aled-semantic-text-accent: var(--aled-primitive-color-brand-petrol-700); --aled-semantic-text-inverse: var(--aled-primitive-color-neutral-white); --aled-semantic-text-muted: var(--aled-primitive-color-text-muted); --aled-semantic-text-primary: var(--aled-primitive-color-brand-petrol); --aled-semantic-text-secondary: var(--aled-primitive-color-text-soft); /* Legacy aliases - keep existing store and brandbook consumers working */ --al-black: var(--aled-primitive-color-neutral-black); --al-blue-100: var(--aled-primitive-color-brand-ice); --al-blue-400: var(--aled-primitive-color-brand-slate); --al-blue-600: var(--aled-primitive-color-brand-steel); --al-blue-700: var(--aled-primitive-color-brand-petrol-700); --al-blue-800: var(--aled-primitive-color-brand-petrol); --al-blue-900: var(--aled-primitive-color-brand-deep); --al-font: var(--aled-primitive-typography-family-brand); --al-gradient: var(--aled-primitive-gradient-horizontal); --al-gradient-diag: var(--aled-primitive-gradient-diagonal); --al-light-blue: var(--aled-primitive-color-light-cyan); --al-light-cyan: var(--aled-primitive-color-light-turquoise); --al-light-green: var(--aled-primitive-color-light-green); --al-white: var(--aled-primitive-color-neutral-white); --blue-100: var(--aled-primitive-color-brand-ice); --blue-400: var(--aled-primitive-color-brand-slate); --blue-500: var(--aled-primitive-color-brand-slate); --blue-600: var(--aled-primitive-color-brand-steel); --blue-700: var(--aled-primitive-color-brand-petrol-700); --blue-800: var(--aled-primitive-color-brand-petrol); --blue-900: var(--aled-primitive-color-brand-night); --erro: var(--aled-primitive-color-feedback-error); --font: var(--aled-primitive-typography-family-brand); --grad: var(--aled-primitive-gradient-horizontal); --grad-diag: var(--aled-primitive-gradient-diagonal); --ink-on-grad: var(--aled-primitive-color-brand-night); --light-blue: var(--aled-primitive-color-light-cyan); --light-cyan: var(--aled-primitive-color-light-turquoise); --light-green: var(--aled-primitive-color-light-green); --line: var(--aled-primitive-color-surface-line); --mist: var(--aled-primitive-color-surface-mist); --paper: var(--aled-primitive-color-surface-paper); --radius: var(--aled-primitive-radius-md); --text-mute: var(--aled-primitive-color-text-muted); --text-soft: var(--aled-primitive-color-text-soft); --topbar-h: var(--aled-primitive-dimension-layout-topbar-height); --white: var(--aled-primitive-color-neutral-white); --wrap: var(--aled-primitive-dimension-layout-wrap); color-scheme: light; } [data-aled-theme="dark"] { --aled-component-badge-background: var(--aled-semantic-feedback-success-background); --aled-component-badge-foreground: var(--aled-semantic-feedback-success-foreground); --aled-component-badge-radius: var(--aled-primitive-radius-pill); --aled-component-button-primary-background: var(--aled-semantic-action-primary-background); --aled-component-button-primary-border: var(--aled-semantic-border-accent); --aled-component-button-primary-foreground: var(--aled-semantic-action-primary-foreground); --aled-component-button-primary-radius: var(--aled-primitive-radius-control); --aled-component-button-primary-shadow: var(--aled-primitive-shadow-button); --aled-component-button-secondary-background: var(--aled-semantic-action-secondary-background); --aled-component-button-secondary-border: var(--aled-semantic-border-strong); --aled-component-button-secondary-foreground: var(--aled-semantic-action-secondary-foreground); --aled-component-button-secondary-radius: var(--aled-primitive-radius-control); --aled-component-card-background: var(--aled-semantic-surface-primary); --aled-component-card-border: var(--aled-semantic-border-default); --aled-component-card-foreground: var(--aled-semantic-text-primary); --aled-component-card-radius: var(--aled-primitive-radius-md); --aled-component-card-shadow: var(--aled-primitive-shadow-card); --aled-component-input-background: var(--aled-semantic-surface-primary); --aled-component-input-border: var(--aled-semantic-border-default); --aled-component-input-focus-border: var(--aled-semantic-focus-ring); --aled-component-input-foreground: var(--aled-semantic-text-primary); --aled-component-input-placeholder: var(--aled-semantic-text-muted); --aled-component-input-radius: var(--aled-primitive-radius-control); --aled-semantic-action-link: var(--aled-primitive-color-light-cyan); --aled-semantic-action-primary-background: var(--aled-primitive-gradient-horizontal); --aled-semantic-action-primary-foreground: var(--aled-primitive-color-brand-deep); --aled-semantic-action-secondary-background: var(--aled-primitive-color-brand-ice); --aled-semantic-action-secondary-foreground: var(--aled-primitive-color-brand-petrol); --aled-semantic-background-brand: var(--aled-primitive-color-brand-petrol); --aled-semantic-background-canvas: var(--aled-primitive-color-brand-deep); --aled-semantic-background-inverse: var(--aled-primitive-color-surface-paper); --aled-semantic-border-accent: var(--aled-primitive-color-light-turquoise); --aled-semantic-border-default: var(--aled-primitive-color-brand-steel); --aled-semantic-border-strong: var(--aled-primitive-color-brand-slate); --aled-semantic-disabled-background: var(--aled-primitive-color-brand-steel); --aled-semantic-disabled-foreground: var(--aled-primitive-color-brand-ice); --aled-semantic-disabled-opacity: var(--aled-primitive-opacity-disabled); --aled-semantic-feedback-error-background: var(--aled-primitive-color-feedback-error); --aled-semantic-feedback-error-foreground: var(--aled-primitive-color-neutral-white); --aled-semantic-feedback-success-background: var(--aled-primitive-color-light-green); --aled-semantic-feedback-success-foreground: var(--aled-primitive-color-brand-night); --aled-semantic-focus-ring: var(--aled-primitive-color-light-turquoise); --aled-semantic-icon-accent: var(--aled-primitive-color-light-cyan); --aled-semantic-icon-inverse: var(--aled-primitive-color-brand-petrol); --aled-semantic-icon-primary: var(--aled-primitive-color-neutral-white); --aled-semantic-icon-secondary: var(--aled-primitive-color-brand-ice); --aled-semantic-surface-elevated: var(--aled-primitive-color-brand-petrol-700); --aled-semantic-surface-primary: var(--aled-primitive-color-brand-petrol); --aled-semantic-surface-secondary: var(--aled-primitive-color-brand-night); --aled-semantic-text-accent: var(--aled-primitive-color-light-cyan); --aled-semantic-text-inverse: var(--aled-primitive-color-brand-petrol); --aled-semantic-text-muted: var(--aled-primitive-color-brand-ice); --aled-semantic-text-primary: var(--aled-primitive-color-neutral-white); --aled-semantic-text-secondary: var(--aled-primitive-color-brand-ice); color-scheme: dark; }