@layer theme {
:root {
  /* Paleta da marca (styleguide Figma) — escalas +90…−90 */
  --brand-gray-90: #FAFAFA;
  --brand-gray-60: #EBEBEB;
  --brand-gray-30: #DDDDDB;
  --brand-gray: #CECECC;
  --brand-gray-n30: #90908F;
  --brand-gray-n60: #525252;
  --brand-gray-n90: #151514;
  --brand-dark-90: #E7E8E8;
  --brand-dark-60: #9FA3A5;
  --brand-dark-30: #575C60;
  --brand-dark: #0F161C;
  --brand-dark-n30: #0A0F13;
  --brand-dark-n60: #06080B;
  --brand-dark-n90: #010203;
  --brand-lime-90: #FDFEED;
  --brand-lime-60: #F7F9B7;
  --brand-lime-30: #F1F481;
  --brand-lime: #EBEF4B;
  --brand-lime-n30: #A5A735;
  --brand-lime-n60: #5E601E;
  --brand-lime-n90: #171808;

  /* Brand / Accents — escura interativa + lima de apoio */
  --color-primary: var(--brand-dark);
  --color-secondary: var(--brand-lime);
  /* Hovers do style guide: escura +12% luz (#2C3237) · lima −10% luz (#D4D744) */
  --color-primary-hover: color-mix(in srgb, var(--brand-dark), white 12%);
  --color-secondary-hover: color-mix(in srgb, var(--brand-lime), black 10%);
  --color-error: #c0392b;
  --color-success: #5d6f3f;
  --color-warning: #d98a1f;
  --color-info: #5b7fb0;
  --color-error-bg: color-mix(in srgb, var(--color-error), transparent 90%);
  --color-success-bg: color-mix(in srgb, var(--color-success), transparent 88%);

  /* Global Layout — cinza claro */
  --bg-elevated: #ffffff;
  --bg-base: var(--brand-gray-90);
  --bg-surface: var(--brand-gray-60);

  /* Typography Colors */
  --text-main: var(--brand-dark);
  --text-muted: var(--brand-dark-30);
  --text-inverted: var(--brand-gray-90);

  /* Generic Borders */
  --border-subtle: var(--brand-gray-60);
  --border-base: var(--brand-gray-30);

  /* Forms & Inputs */
  --input-bg: #ffffff;
  --input-bg-disabled: var(--brand-gray-60);
  --input-border: var(--brand-gray-30);
  --input-border-hover: var(--brand-gray);
  --input-ring-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 78%);
  --input-text: var(--text-main);
  --input-placeholder: var(--brand-gray-n30);
  --input-addon-bg: var(--brand-gray-60);
  --fieldset-border: var(--border-subtle);
  --checkbox-border: var(--brand-gray);
  --disabled-opacity: 0.6;

  /* Buttons */
  --btn-bg: var(--brand-gray-60);
  --btn-bg-hover: var(--brand-gray-30);
  --btn-text: var(--text-main);
  --btn-danger-bg: color-mix(in srgb, var(--color-error), transparent 85%);
  --btn-danger-bg-hover: color-mix(in srgb, var(--color-error), transparent 75%);

  /* Button Variants */
  --btn-outline-border: var(--border-base);
  --btn-outline-text: var(--text-main);
  --btn-ghost-text: var(--text-muted);
  --btn-ghost-hover: color-mix(in srgb, var(--text-main), transparent 92%);

  /* Toggle / Switch */
  --toggle-bg: var(--brand-gray-30);
  --toggle-bg-checked: var(--color-primary);
  --toggle-knob: #ffffff;

  /* Range Slider */
  --range-track-bg: var(--brand-gray-30);
  --range-track-fill: var(--color-primary);
  --range-thumb: var(--color-primary);

  /* Rating */
  --rating-color: var(--border-base);
  --rating-color-active: var(--color-warning);

  /* Badge & Tag Variants */
  --badge-outline-border: var(--border-base);
  --tag-bg: var(--bg-surface);
  --tag-text: var(--text-main);

  /* Progress */
  --progress-bg: var(--brand-gray-30);
  --progress-fill: var(--color-primary);
  --progress-height: 0.5rem;

  /* Spinner */
  --spinner-color: var(--color-primary);
  --spinner-track: color-mix(in srgb, var(--spinner-color), transparent 75%);
  --spinner-size: 1.5rem;

  /* Avatar */
  --avatar-size-sm: 2rem;
  --avatar-size-md: 3rem;
  --avatar-size-lg: 4rem;
  --avatar-size-xl: 6rem;
  --avatar-ring: var(--color-primary);
  --avatar-ring-offset: var(--bg-base);

  /* Skeleton */
  --skeleton-bg: var(--brand-gray-60);
  --skeleton-shine: var(--brand-gray-90);

  /* Divider */
  --divider-color: var(--border-subtle);

  /* Tables */
  --table-bg: transparent;
  --table-header-bg: var(--bg-surface);
  --table-border: var(--border-subtle);
  --table-row-hover: color-mix(in srgb, var(--color-primary), transparent 95%);

  /* Code & Blockquotes */
  --code-bg: var(--brand-gray-60);
  --blockquote-border: var(--border-base);
  --blockquote-bg: color-mix(in srgb, var(--border-base), transparent 85%);

  /* Dialogs */
  --dialog-border: var(--border-subtle);
  --backdrop-bg: rgba(15, 22, 28, 0.5);
  --backdrop-blur: blur(3px);

  /* Details */
  --details-bg: #ffffff;
  --details-header-bg: var(--card-header-bg);
  --details-border: var(--border-subtle);

  /* Media */
  --audio-bg: var(--bg-surface);

  /* Typography Scales — General Sans (UI), Crimson Pro (títulos), Space Mono (números) */
  --font-sans: 'General Sans', system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-serif);
  --font-serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Escala do Figma: micro/overline 12 · caption 14 · body 16 · body-l 18 · h4 20 ·
     h3 24 · h2 34 · h1 48 · display 64 */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.125rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-5xl: 4.5rem;
  --text-6xl: 5rem;

  /* Spacing */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Radius — cantos generosos do tema Volo */
  --radius-sm: 0.5rem;
  --radius-md: 0.7rem;
  --radius-lg: 1rem;

  /* Shadows & Focus */
  --shadow-sm: 0 1px 2px 0 rgba(15, 22, 28, 0.06);
  --shadow-md: 0 10px 24px -12px rgba(15, 22, 28, 0.28);
  --outline-focus: 2px solid var(--color-primary);
  --outline-focus-accent: 2px solid var(--brand-lime); /* anel lima dos CTAs da loja */

  /* Motion (style guide): durações + easings oficiais */
  --motion-instant: 0ms;
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-enter: 320ms;
  --motion-exit: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-entry: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);

  /* Transitions (atalhos legados mapeados nos tokens de motion) */
  --transition-fast: var(--motion-fast) var(--ease-standard);
  --transition-base: var(--motion-base) var(--ease-standard);
  --transition-bounce: var(--motion-base) var(--ease-standard);

  /* Alert */
  --alert-bg: var(--bg-surface);
  --alert-border: var(--border-subtle);
  --alert-info-bg: color-mix(in srgb, var(--color-info), white 85%);
  --alert-info-border: color-mix(in srgb, var(--color-info), white 75%);
  --alert-success-bg: color-mix(in srgb, var(--color-success), white 85%);
  --alert-success-border: color-mix(in srgb, var(--color-success), white 75%);
  --alert-warning-bg: color-mix(in srgb, var(--color-warning), white 85%);
  --alert-warning-border: color-mix(in srgb, var(--color-warning), white 75%);
  --alert-error-bg: color-mix(in srgb, var(--color-error), white 85%);
  --alert-error-border: color-mix(in srgb, var(--color-error), white 75%);
  --alert-info-text: color-mix(in srgb, var(--color-info), black 25%);
  --alert-success-text: color-mix(in srgb, var(--color-success), black 20%);
  --alert-warning-text: color-mix(in srgb, var(--color-warning), black 25%);
  --alert-error-text: color-mix(in srgb, var(--color-error), black 15%);

  /* Button Outline Hover */
  --btn-outline-hover-bg: color-mix(in srgb, var(--color-primary), transparent 92%);

  /* Validation rings */
  --input-error-ring: 0 0 0 3px color-mix(in srgb, var(--color-error), transparent 70%);
  --input-success-ring: 0 0 0 3px color-mix(in srgb, var(--color-success), transparent 70%);

  /* Tag Variants */
  --tag-primary-bg: color-mix(in srgb, var(--color-primary), transparent 88%);
  --tag-success-bg: color-mix(in srgb, var(--color-success), transparent 82%);
  --tag-warning-bg: color-mix(in srgb, var(--color-warning), transparent 80%);
  --tag-error-bg: color-mix(in srgb, var(--color-error), transparent 85%);
  --tag-info-bg: color-mix(in srgb, var(--color-info), transparent 85%);

  /* Table Striped */
  --table-striped-bg: var(--bg-surface);

  /* Avatar */
  --avatar-bg: var(--bg-surface);
  --avatar-color: var(--brand-dark-30);
  --avatar-font-weight: var(--font-weight-bold);

  /* Badge */
  --badge-bg: var(--bg-surface);

  /* Box */
  --box-bg: #ffffff;

  /* Diff */
  --diff-bg: #ffffff;
  --diff-border: var(--border-base);
  --diff-header-bg: var(--bg-surface);
  --diff-add-bg: color-mix(in srgb, var(--color-success), transparent 85%);
  --diff-remove-bg: color-mix(in srgb, var(--color-error), transparent 85%);

  /* Card (components) */
  --card-bg: #ffffff;
  --card-border: var(--border-subtle);
  --card-header-bg: color-mix(in srgb, #ffffff, var(--bg-surface) 50%);
  --card-footer-border: var(--border-subtle);
  --card-image-height: 12rem;
  --card-image-width: 10rem;

  /* Navbar */
  --navbar-bg: #ffffff;
  --navbar-border: var(--border-subtle);

  /* Pagination */
  --pagination-bg: #ffffff;
  --pagination-border: var(--border-subtle);
  --pagination-text: var(--text-main);
  --pagination-hover-bg: var(--bg-surface);

  /* Tabs */
  --tabs-border: var(--border-subtle);

  /* Modal */
  --modal-width: 520px;
  --modal-bg: #ffffff;

  /* Accordion */
  --accordion-border: var(--border-subtle);
  --accordion-header-bg: var(--bg-surface);
  --accordion-header-hover-bg: color-mix(in srgb, var(--bg-surface), black 4%);

  /* Dropdown */
  --dropdown-bg: #ffffff;
  --dropdown-border: var(--border-subtle);
  --dropdown-hover-bg: color-mix(in srgb, var(--color-primary), transparent 92%);

  /* Tooltip */
  --tooltip-bg: var(--text-main);
  --tooltip-text: #ffffff;

  /* Menu */
  --menu-item-hover-bg: color-mix(in srgb, var(--text-main), transparent 94%);
  --menu-item-active-bg: color-mix(in srgb, var(--color-primary), transparent 90%);

  /* Toast */
  --toast-bg: #ffffff;
  --toast-shadow: var(--shadow-md);

  /* Message */
  --message-bg: #ffffff;
  --message-border: var(--border-subtle);

  /* Layout */
  --container-max-width: 1180px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;

  /* Steps */
  --step-color: var(--border-base);
  --step-active-color: var(--color-primary);
  --step-complete-color: var(--color-success);

  /* Stat */
  --stat-bg: #ffffff;
  --stat-border: var(--border-subtle);
  --stat-icon-bg: color-mix(in srgb, var(--color-primary), transparent 90%);
  --stat-icon-color: var(--brand-dark);

  /* Timeline */
  --timeline-line: var(--border-base);
  --timeline-marker: var(--color-primary);
  --timeline-marker-ring: #ffffff;

  /* Hero */
  --hero-bg: var(--bg-surface);
  --hero-overlay: rgba(1, 2, 3, 0.4);

  /* Pricing */
  --pricing-bg: #ffffff;
  --pricing-border: var(--border-subtle);
  --pricing-featured-border: var(--color-primary);

  /* Drawer — sidebar admin escura */
  --drawer-bg: var(--brand-dark);
  --drawer-border: rgba(255, 255, 255, 0.08);

  /* List Group */
  --list-group-bg: #ffffff;
  --list-group-border: var(--border-subtle);
  --list-group-hover-bg: var(--bg-surface);

  /* Offcanvas */
  --offcanvas-bg: #ffffff;

  /* Bottom Nav */
  --bottom-nav-bg: #ffffff;
  --bottom-nav-border: var(--border-base);

  /* Chat */
  --chat-bubble-bg: var(--brand-gray-60);
  --chat-bubble-end-bg: var(--color-primary);
  --chat-bubble-end-text: var(--text-inverted);

  /* Carousel */
  --carousel-nav-bg: #ffffff;
  --carousel-nav-border: var(--border-base);
  --carousel-nav-hover-bg: var(--bg-surface);

  /* Popover */
  --popover-bg: #ffffff;
  --popover-border: var(--border-base);

  /* Panel */
  --panel-bg: #ffffff;
  --panel-border: var(--border-subtle);

  /* Mockup Browser */
  --mockup-browser-bg: var(--bg-surface);
  --mockup-browser-border: var(--border-base);
  --mockup-browser-body-bg: #ffffff;
  --mockup-browser-url-bg: #ffffff;

  /* Mockup Phone */
  --mockup-phone-bg: var(--bg-surface);
  --mockup-phone-border: var(--border-base);
  --mockup-phone-body-bg: #ffffff;

  /* Mockup Window */
  --mockup-window-bg: var(--bg-surface);
  --mockup-window-border: var(--border-base);
  --mockup-window-body-bg: #ffffff;

  /* Mockup Code */
  --mockup-code-bg: var(--brand-dark);
  --mockup-code-text: var(--brand-gray-90);
  --mockup-code-line-nr: var(--brand-dark-60);

  /* Section Dark */
  --section-dark-bg: var(--brand-dark);
  --section-dark-text: var(--brand-gray-90);
  --section-dark-muted: var(--brand-dark-60);
  --section-dark-border: rgba(255, 255, 255, 0.08);
  --section-dark-card-bg: rgba(255, 255, 255, 0.05);
  --section-dark-card-hover-bg: rgba(255, 255, 255, 0.08);

  /* Bar Sticky */
  --bar-sticky-bg: rgba(15, 22, 28, 0.9);
  --bar-sticky-border: rgba(255, 255, 255, 0.06);

  /* Bar Chart */
  --bar-chart-height: 12rem;

  /* Donut Chart */
  --donut-chart-size: 8rem;
  --donut-chart-size-lg: 12rem;
  --donut-chart-center-bg: #ffffff;

  /* ============ Volo app shell (consumed by components.css) ============ */
  --store-header-bg: rgba(255, 255, 255, 0.03);
  --store-header-text: #ffffff;
  --store-header-muted: rgba(255, 255, 255, 0.78);
  --store-header-hover: var(--brand-lime);
  --cart-pill-bg: var(--brand-gray-90);
  --cart-pill-border: var(--brand-gray-90);
  --cart-pill-text: var(--brand-dark);
  --wa-fab-bg: var(--brand-lime);
  --wa-fab-text: var(--brand-dark);
  --admin-menu-text: var(--brand-dark-90);
  --admin-menu-muted: var(--brand-dark-60);
  --admin-menu-hover-bg: rgba(255, 255, 255, 0.06);
  --admin-menu-active-bg: var(--brand-dark-n30);
  --admin-menu-active-text: var(--brand-lime);
  --admin-sidebar-bg: var(--brand-dark);
  --admin-divider: color-mix(in srgb, var(--brand-gray-90), transparent 88%);
}
}