@layer theme {
:root {
  /* Brand / Accents */
  --color-primary: #7287fd;
  --color-secondary: #8839ef;
  --color-primary-hover: color-mix(in srgb, var(--color-primary), var(--color-secondary) 60%);
  --color-secondary-hover: color-mix(in srgb, var(--color-secondary), black 60%);
  --color-error: #d20f39;
  --color-success: #40a02b;
  --color-warning: #df8e1d;
  --color-info: #04a5e5;
  --color-error-bg: color-mix(in srgb, var(--color-error), transparent 90%);
  --color-success-bg: color-mix(in srgb, var(--color-success), transparent 90%);

  /* Global Layout */
  --bg-base: color-mix(in srgb, #eff1f5, white 20%);
  --bg-surface: #e6e9ef;

  /* Typography Colors */
  --text-main: #4c4f69;
  --text-muted: #6c6f85;
  --text-inverted: #ffffff;

  /* Generic Borders (for layout dividers, not inputs) */
  --border-subtle: #bcc0cc;
  --border-base: #acb0be;

  /* Forms & Inputs */
  --input-bg: color-mix(in srgb, #e2e8f0, black 5%);
  --input-bg-disabled: #e6e9ef;
  --input-border: color-mix(in srgb, var(--color-primary), transparent 98%);
  --input-border-hover: #acb0be;
  --input-ring-focus: 0 0 0 1px color-mix(in srgb, var(--color-primary), transparent 50%);
  --input-text: var(--text-main);
  --input-placeholder: color-mix(in srgb, var(--input-bg), black 35%);
  --input-addon-bg: color-mix(in srgb, var(--input-bg), black 6%);
  --fieldset-border: color-mix(in srgb, var(--border-base), transparent 90%);
  --checkbox-border: color-mix(in srgb, var(--border-base), transparent 60%);
  --disabled-opacity: 0.6;

  /* Buttons */
  --btn-bg: #ccd0da;
  --btn-bg-hover: #bcc0cc;
  --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(--text-muted);
  --btn-outline-text: var(--text-main);
  --btn-ghost-text: var(--text-muted);
  --btn-ghost-hover: color-mix(in srgb, var(--text-main), transparent 90%);

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

  /* Range Slider */
  --range-track-bg: var(--input-bg);
  --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(--input-bg);
  --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: color-mix(in srgb, var(--bg-surface), black 10%);
  --skeleton-shine: color-mix(in srgb, var(--skeleton-bg), black 15%);

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

  /* Tables */
  --table-bg: transparent;
  --table-header-bg: var(--bg-surface);
  --table-border: color-mix(in srgb, var(--border-base), transparent 80%);
  --table-row-hover: color-mix(in srgb, var(--text-main), transparent 98%);

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

  /* Dialogs */
  --dialog-border: color-mix(in srgb, var(--border-base), transparent 50%);
  --backdrop-bg: rgba(0, 0, 0, 0.5);
  --backdrop-blur: blur(2px);

  /* Details */
  --details-bg: #ffffff;
  --details-header-bg: var(--card-header-bg);
  --details-border: color-mix(in srgb, var(--border-base), transparent 70%);

  /* Media */
  --audio-bg: color-mix(in srgb, var(--bg-surface), black 6%);

  /* Typography Scales */
  --font-sans: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

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

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;
  --text-6xl: 4.5rem;

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

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* Shadows & Focus */
  --shadow-sm: 0 1px 2px 0 rgba(76, 79, 105, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(76, 79, 105, 0.1), 0 2px 4px -1px rgba(76, 79, 105, 0.06);
  --outline-focus: 2px solid var(--color-primary);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.2s ease-in-out;
  --transition-bounce: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

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

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

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

  /* Tag Variants */
  --tag-primary-bg: color-mix(in srgb, var(--color-primary), transparent 85%);
  --tag-success-bg: color-mix(in srgb, var(--color-success), transparent 85%);
  --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(--color-primary);
  --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: color-mix(in srgb, var(--border-base), transparent 70%);
  --card-header-bg: color-mix(in srgb, #ffffff, var(--bg-surface) 25%);
  --card-footer-border: var(--border-subtle);
  --card-image-height: 12rem;
  --card-image-width: 10rem;

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

  /* Pagination */
  --pagination-bg: var(--bg-base);
  --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: 500px;
  --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 5%);

  /* 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 88%);

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

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

  /* Layout */
  --container-max-width: 1200px;
  --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: color-mix(in srgb, var(--border-base), transparent 70%);
  --stat-icon-bg: color-mix(in srgb, var(--color-primary), transparent 88%);
  --stat-icon-color: var(--color-primary);

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

  /* Hero */
  --hero-bg: var(--bg-surface);
  --hero-overlay: rgba(0, 0, 0, 0.5);

  /* Pricing */
  --pricing-bg: #ffffff;
  --pricing-border: color-mix(in srgb, var(--border-base), transparent 70%);
  --pricing-featured-border: var(--color-primary);

  /* Drawer */
  --drawer-bg: #ffffff;
  --drawer-border: var(--border-subtle);

  /* List Group */
  --list-group-bg: #ffffff;
  --list-group-border: var(--border-base);
  --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: #d5d9e3;
  --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-base);

  /* 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: #1e1e2e;
  --mockup-code-text: #cdd6f4;
  --mockup-code-line-nr: #585b70;

  /* Section Dark */
  --section-dark-bg: #1e1e2e;
  --section-dark-text: #ffffff;
  --section-dark-muted: #a6adc8;
  --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(30, 30, 46, 0.85);
  --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;
}
}