/* ============================================================
   MEL — Honey & Slate theme
   Modernized token set for the Mel framework.
   Architecture preserved: this is a drop-in replacement for
   theme-latte.css / theme-nord-light.css.

   Built on primitive ramps (--honey-*, --slate-*) so brand
   identity can be retuned by overriding a handful of primitives.
   ============================================================ */
@layer theme {
:root {
  color-scheme: only light;

  /* ---------- PRIMITIVES : Honey (brand) ----------
     Anchored on the official logo amber (#f59e0b). */
  --honey-50:  #fff9ee;
  --honey-100: #fdeecb;
  --honey-200: #fcdd95;
  --honey-300: #fbc760;
  --honey-400: #f9b234;
  --honey-500: #f59e0b;   /* brand fill — matches logo */
  --honey-600: #cf820c;   /* hover */
  --honey-700: #9c5e0e;   /* honey text on light ~5:1 */
  --honey-800: #7a4a12;
  --honey-900: #5d3914;
  --honey-ink: #3f2c08;   /* espresso text on honey fills */

  /* ---------- 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-primary-hover: var(--honey-600);
  --color-primary-fg: var(--honey-ink);   /* NEW: ink that sits on honey fills */
  --color-primary-text: var(--honey-700); /* NEW: honey used as text on light */
  --color-secondary: var(--slate-600);
  --color-secondary-hover: var(--slate-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;

  /* ---------- BORDERS ---------- */
  --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: var(--slate-200);
  --checkbox-border: var(--slate-400);
  --disabled-opacity: 0.55;

  /* ---------- BUTTONS ---------- */
  --btn-bg: var(--slate-100);
  --btn-bg-hover: var(--slate-200);
  --btn-text: var(--slate-700);
  --btn-danger-bg: color-mix(in srgb, var(--color-error), transparent 88%);
  --btn-danger-bg-hover: color-mix(in srgb, var(--color-error), transparent 80%);

  --btn-outline-border: var(--slate-300);
  --btn-outline-text: var(--slate-700);
  --btn-ghost-text: var(--slate-600);
  --btn-ghost-hover: color-mix(in srgb, var(--slate-500), transparent 90%);
  --btn-outline-hover-bg: color-mix(in srgb, var(--color-primary), transparent 90%);

  /* ---------- 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(--slate-300);
  --rating-color-active: var(--honey-400);

  /* ---------- BADGE & TAG ---------- */
  --badge-outline-border: var(--slate-300);
  --badge-bg: var(--slate-100);
  --tag-bg: var(--slate-100);
  --tag-text: var(--slate-700);
  --tag-primary-bg: color-mix(in srgb, var(--color-primary), transparent 84%);
  --tag-success-bg: color-mix(in srgb, var(--color-success), transparent 86%);
  --tag-warning-bg: color-mix(in srgb, var(--color-warning), transparent 84%);
  --tag-error-bg:   color-mix(in srgb, var(--color-error), transparent 86%);
  --tag-info-bg:    color-mix(in srgb, var(--color-info), transparent 86%);

  /* ---------- 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 78%);
  --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-200);
  --skeleton-shine: color-mix(in srgb, var(--slate-200), white 45%);

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

  /* ---------- TABLES ---------- */
  --table-bg: transparent;
  --table-header-bg: var(--slate-50);
  --table-border: var(--slate-200);
  --table-row-hover: color-mix(in srgb, var(--honey-500), transparent 94%);
  --table-striped-bg: var(--slate-50);

  /* ---------- CODE & BLOCKQUOTES ---------- */
  --code-bg: var(--slate-100);
  --blockquote-border: var(--honey-400);
  --blockquote-bg: var(--honey-50);

  /* ---------- DIALOGS ---------- */
  --dialog-border: var(--slate-200);
  --backdrop-bg: color-mix(in srgb, var(--slate-900), transparent 45%);
  --backdrop-blur: blur(3px);

  /* ---------- DETAILS ---------- */
  --details-bg: var(--bg-surface);
  --details-header-bg: var(--slate-50);
  --details-border: var(--slate-200);

  /* ---------- MEDIA ---------- */
  --audio-bg: var(--slate-100);

  /* ---------- TYPOGRAPHY SCALE ---------- */
  --font-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-script: 'Pacifico', 'Nunito', cursive;

  --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-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* ---------- RADIUS (balanced, crisp) ---------- */
  --radius-sm: 0.5rem;      /* 8px  */
  --radius-md: 0.625rem;    /* 10px */
  --radius-lg: 0.875rem;    /* 14px */
  --radius-xl: 1.125rem;    /* 18px */
  --radius-pill: 999px;

  /* ---------- SHADOWS & FOCUS (warm slate cast, soft) ---------- */
  --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(--slate-200);
  --alert-info-bg:    color-mix(in srgb, var(--color-info), white 88%);
  --alert-info-border:color-mix(in srgb, var(--color-info), white 70%);
  --alert-success-bg: color-mix(in srgb, var(--color-success), white 88%);
  --alert-success-border: color-mix(in srgb, var(--color-success), white 70%);
  --alert-warning-bg: var(--honey-50);
  --alert-warning-border: color-mix(in srgb, var(--color-warning), white 65%);
  --alert-error-bg:   color-mix(in srgb, var(--color-error), white 88%);
  --alert-error-border: color-mix(in srgb, var(--color-error), white 70%);
  --alert-info-text:    color-mix(in srgb, var(--color-info), black 22%);
  --alert-success-text: color-mix(in srgb, var(--color-success), black 22%);
  --alert-warning-text: var(--honey-800);
  --alert-error-text:   color-mix(in srgb, var(--color-error), black 18%);

  /* ---------- VALIDATION RINGS ---------- */
  --input-error-ring:   0 0 0 3px color-mix(in srgb, var(--color-error), transparent 80%);
  --input-success-ring: 0 0 0 3px color-mix(in srgb, var(--color-success), transparent 80%);

  /* ---------- BOX ---------- */
  --box-bg: var(--bg-surface);

  /* ---------- DIFF ---------- */
  --diff-bg: var(--bg-surface);
  --diff-border: var(--slate-200);
  --diff-header-bg: var(--slate-50);
  --diff-add-bg: color-mix(in srgb, var(--color-success), transparent 86%);
  --diff-remove-bg: color-mix(in srgb, var(--color-error), transparent 86%);

  /* ---------- CARD ---------- */
  --card-bg: var(--bg-surface);
  --card-border: var(--slate-200);
  --card-header-bg: var(--slate-50);
  --card-footer-border: var(--slate-200);
  --card-image-height: 12rem;
  --card-image-width: 10rem;

  /* ---------- NAVBAR ---------- */
  --navbar-bg: var(--bg-surface);
  --navbar-border: var(--slate-200);

  /* ---------- PAGINATION ---------- */
  --pagination-bg: var(--bg-surface);
  --pagination-border: var(--slate-200);
  --pagination-text: var(--text-main);
  --pagination-hover-bg: var(--slate-100);

  /* ---------- TABS ---------- */
  --tabs-border: var(--slate-200);

  /* ---------- MODAL ---------- */
  --modal-width: 500px;
  --modal-bg: var(--bg-surface);

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

  /* ---------- DROPDOWN ---------- */
  --dropdown-bg: var(--bg-surface);
  --dropdown-border: var(--slate-200);
  --dropdown-hover-bg: color-mix(in srgb, var(--color-primary), transparent 90%);

  /* ---------- TOOLTIP ---------- */
  --tooltip-bg: var(--slate-800);
  --tooltip-text: #ffffff;

  /* ---------- MENU ---------- */
  --menu-item-hover-bg: color-mix(in srgb, var(--slate-500), transparent 90%);
  --menu-item-active-bg: color-mix(in srgb, var(--color-primary), transparent 86%);

  /* ---------- TOAST / MESSAGE ---------- */
  --toast-bg: var(--bg-surface);
  --toast-shadow: var(--shadow-lg);
  --message-bg: var(--bg-surface);
  --message-border: var(--slate-200);

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

  /* ---------- STEPS ---------- */
  --step-color: var(--slate-300);
  --step-active-color: var(--color-primary);
  --step-complete-color: var(--color-success);

  /* ---------- STAT ---------- */
  --stat-bg: var(--bg-surface);
  --stat-border: var(--slate-200);
  --stat-icon-bg: color-mix(in srgb, var(--color-primary), transparent 86%);
  --stat-icon-color: var(--honey-700);

  /* ---------- TIMELINE ---------- */
  --timeline-line: var(--slate-200);
  --timeline-marker: var(--color-primary);
  --timeline-marker-ring: var(--bg-surface);

  /* ---------- HERO ---------- */
  --hero-bg: var(--slate-100);
  --hero-overlay: rgba(29, 35, 44, 0.55);

  /* ---------- PRICING ---------- */
  --pricing-bg: var(--bg-surface);
  --pricing-border: var(--slate-200);
  --pricing-featured-border: var(--color-primary);

  /* ---------- DRAWER ---------- */
  --drawer-bg: var(--bg-surface);
  --drawer-border: var(--slate-200);

  /* ---------- LIST GROUP ---------- */
  --list-group-bg: var(--bg-surface);
  --list-group-border: var(--slate-200);
  --list-group-hover-bg: var(--slate-50);

  /* ---------- OFFCANVAS / BOTTOM NAV ---------- */
  --offcanvas-bg: var(--bg-surface);
  --bottom-nav-bg: var(--bg-surface);
  --bottom-nav-border: var(--slate-200);

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

  /* ---------- CAROUSEL / POPOVER / PANEL ---------- */
  --carousel-nav-bg: var(--bg-surface);
  --carousel-nav-border: var(--slate-200);
  --carousel-nav-hover-bg: var(--slate-100);
  --popover-bg: var(--bg-surface);
  --popover-border: var(--slate-200);
  --panel-bg: var(--bg-surface);
  --panel-border: var(--slate-200);

  /* ---------- MOCKUPS ---------- */
  --mockup-browser-bg: var(--slate-100);
  --mockup-browser-border: var(--slate-200);
  --mockup-browser-body-bg: var(--bg-surface);
  --mockup-browser-url-bg: var(--bg-surface);
  --mockup-phone-bg: var(--slate-100);
  --mockup-phone-border: var(--slate-300);
  --mockup-phone-body-bg: var(--bg-surface);
  --mockup-window-bg: var(--slate-100);
  --mockup-window-border: var(--slate-200);
  --mockup-window-body-bg: var(--bg-surface);
  --mockup-code-bg: var(--slate-900);
  --mockup-code-text: #e7ebf1;
  --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.10);
  --section-dark-card-bg: rgba(255, 255, 255, 0.05);
  --section-dark-card-hover-bg: rgba(255, 255, 255, 0.09);

  /* ---------- BAR STICKY ---------- */
  --bar-sticky-bg: color-mix(in srgb, var(--slate-900), transparent 12%);
  --bar-sticky-border: rgba(255, 255, 255, 0.08);

  /* ---------- CHARTS ---------- */
  --bar-chart-height: 12rem;
  --donut-chart-size: 8rem;
  --donut-chart-size-lg: 12rem;
  --donut-chart-center-bg: var(--bg-surface);
}
}