@layer theme {
:root {
  color-scheme: only light;

  /* Primitives: Honey (brand amber, anchored on the logo #f59e0b) */
  --honey-50:  #fff9ee;
  --honey-100: #fdeecb;
  --honey-200: #fcdd95;
  --honey-300: #fbc760;
  --honey-400: #f9b234;
  --honey-500: #f59e0b;
  --honey-600: #cf820c;
  --honey-700: #9c5e0e;
  --honey-800: #7a4a12;
  --honey-900: #5d3914;
  --honey-ink: #3f2c08;

  /* Primitives: Slate (neutral) */
  --slate-50:  #f7f8fa;
  --slate-100: #eef1f5;
  --slate-200: #e3e8ee;
  --slate-300: #cfd7e0;
  --slate-400: #9ca7b5;
  --slate-500: #6c7888;
  --slate-600: #4e5969;
  --slate-700: #3a4351;
  --slate-800: #2b323d;
  --slate-900: #1d232c;

  /* Brand / Accents */
  --color-primary: var(--honey-500);
  --color-secondary: var(--slate-600);
  --color-primary-hover: var(--honey-600);
  --color-secondary-hover: var(--slate-700);
  --color-primary-fg: var(--honey-ink);
  --color-primary-text: var(--honey-700);
  --color-error: #d6495b;
  --color-success: #3e9b63;
  --color-warning: #d98324;
  --color-info: #3e7dc4;
  --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: #f4f6f9;
  --bg-surface: #ffffff;

  /* Typography Colors */
  --text-main: var(--slate-800);
  --text-muted: var(--slate-500);
  --text-inverted: #ffffff;

  /* Generic Borders (for layout dividers, not inputs) */
  --border-subtle: var(--slate-200);
  --border-base: var(--slate-300);

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

  /* Buttons */
  --btn-bg: var(--slate-100);
  --btn-bg-hover: var(--slate-200);
  --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(--slate-300);
  --btn-outline-text: var(--text-main);
  --btn-ghost-text: var(--text-muted);
  --btn-ghost-hover: color-mix(in srgb, var(--text-main), transparent 92%);
  --btn-outline-hover-bg: color-mix(in srgb, var(--color-primary), transparent 92%);

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

  /* Range Slider */
  --range-track-bg: var(--slate-200);
  --range-track-fill: var(--color-primary);
  --range-thumb: var(--color-primary);

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

  /* Badge & Tag Variants */
  --badge-outline-border: var(--border-base);
  --tag-bg: var(--slate-100);
  --tag-text: var(--text-main);
  --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%);

  /* Progress */
  --progress-bg: var(--slate-200);
  --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);
  --avatar-bg: var(--honey-100);
  --avatar-color: var(--honey-700);
  --avatar-font-weight: var(--font-weight-bold);

  /* Skeleton */
  --skeleton-bg: var(--slate-100);
  --skeleton-shine: var(--slate-200);

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

  /* Tables */
  --table-bg: transparent;
  --table-header-bg: var(--slate-50);
  --table-border: var(--slate-200);
  --table-row-hover: var(--slate-50);
  --table-striped-bg: var(--slate-50);

  /* Code & Blockquotes */
  --code-bg: var(--slate-100);
  --blockquote-border: var(--border-base);
  --blockquote-bg: var(--slate-50);

  /* Dialogs */
  --dialog-border: color-mix(in srgb, var(--border-base), transparent 50%);
  --backdrop-bg: rgba(29, 35, 44, 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: var(--slate-100);

  /* Typography Scales */
  --font-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', 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;
  --font-weight-heavy: 800;

  --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;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-base: 1.6;

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

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-pill: 999px;

  /* Shadows & Focus */
  --shadow-xs: 0 1px 2px rgba(29, 35, 44, 0.05);
  --shadow-sm: 0 1px 3px rgba(29, 35, 44, 0.06), 0 1px 2px rgba(29, 35, 44, 0.04);
  --shadow-md: 0 6px 20px -6px rgba(29, 35, 44, 0.12), 0 2px 6px -2px rgba(29, 35, 44, 0.06);
  --shadow-lg: 0 18px 40px -12px rgba(29, 35, 44, 0.18), 0 6px 14px -6px rgba(29, 35, 44, 0.08);
  --shadow-modal: 0 28px 60px -16px rgba(29, 35, 44, 0.30);
  --outline-focus: 2px solid var(--color-primary);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-bounce: 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);

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

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

  /* Badge */
  --badge-bg: var(--slate-100);

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

  /* Diff */
  --diff-bg: #ffffff;
  --diff-border: var(--border-base);
  --diff-header-bg: var(--slate-50);
  --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(--slate-200);
  --card-header-bg: var(--slate-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: var(--bg-surface);
  --pagination-border: var(--border-subtle);
  --pagination-text: var(--text-main);
  --pagination-hover-bg: var(--slate-50);

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

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

  /* Accordion */
  --accordion-border: var(--border-subtle);
  --accordion-header-bg: var(--slate-50);
  --accordion-header-hover-bg: var(--slate-100);

  /* 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(--slate-800);
  --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: var(--slate-200);
  --stat-icon-bg: var(--honey-100);
  --stat-icon-color: var(--honey-700);

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

  /* Hero */
  --hero-bg: var(--slate-50);
  --hero-overlay: rgba(29, 35, 44, 0.5);

  /* Pricing */
  --pricing-bg: #ffffff;
  --pricing-border: var(--slate-200);
  --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(--slate-50);

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

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

  /* Chat */
  --chat-bubble-bg: var(--slate-100);
  --chat-bubble-end-bg: var(--color-primary);
  --chat-bubble-end-text: var(--honey-ink);

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

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

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

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

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

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

  /* Mockup Code */
  --mockup-code-bg: var(--slate-900);
  --mockup-code-text: var(--slate-200);
  --mockup-code-line-nr: var(--slate-500);

  /* Section Dark */
  --section-dark-bg: var(--slate-900);
  --section-dark-text: #ffffff;
  --section-dark-muted: var(--slate-400);
  --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(29, 35, 44, 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;
}
}