/* =========================================================
   Nectar theme: Ingresso Visie (Editorial Festival)
   Warm cream base · coral-red primary · amber accents · deep ink.
   Override Nectar tokens only; component styling comes from
   Nectar's components/elements/layout layers.
   ========================================================= */

@layer theme {
:root {
  /* Brand / Accents --------------------------------------------------- */
  --color-primary: #ff4d2c;
  --color-primary-hover: #e53916;
  --color-secondary: #ffc257; /* amber — badges, hero tags */
  --color-secondary-hover: #e8a73c;
  --color-secondary-ink: #4d3700; /* legible dark text on --color-secondary */
  --color-error: #d91a3a;
  --color-success: #1fa367;
  --color-warning: #e89220;
  --color-info: #2e6bda;
  --color-error-bg: color-mix(in srgb, var(--color-error), white 85%);
  --color-success-bg: color-mix(in srgb, var(--color-success), white 85%);

  /* Global Layout ----------------------------------------------------- */
  --bg-base: #faf6ef;
  --bg-surface: #f4ecdd;

  /* Typography Colors ------------------------------------------------- */
  --text-main: #0c0c10;
  --text-muted: #6c6a63;
  --text-inverted: #faf6ef;

  /* Borders ----------------------------------------------------------- */
  --border-subtle: #e7e0d1;
  --border-base: #cfc6b3;

  /* Forms & Inputs ---------------------------------------------------- */
  --input-bg: #faf6ef;
  --input-bg-disabled: #efe9dc;
  --input-border: #e7e0d1;
  --input-border-hover: #cfc6b3;
  --input-ring-focus: 0 0 0 3px color-mix(in srgb, var(--text-main), transparent 92%);
  --input-text: var(--text-main);
  --input-placeholder: #9c9685;
  --input-addon-bg: color-mix(in srgb, var(--input-bg), black 6%);
  --fieldset-border: var(--border-subtle);
  --checkbox-border: var(--border-base);
  --disabled-opacity: 0.6;

  /* Buttons ----------------------------------------------------------- */
  --btn-bg: var(--text-main);
  --btn-bg-hover: #25252c;
  --btn-text: var(--text-inverted);
  --btn-danger-bg: color-mix(in srgb, var(--color-error), white 80%);
  --btn-danger-bg-hover: color-mix(in srgb, var(--color-error), white 70%);

  --btn-outline-border: var(--border-base);
  --btn-outline-text: var(--text-main);
  --btn-outline-hover-bg: color-mix(in srgb, var(--text-main), transparent 92%);
  --btn-ghost-text: var(--text-main);
  --btn-ghost-hover: color-mix(in srgb, var(--text-main), transparent 92%);

  /* Typography Scales ------------------------------------------------- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Playfair Display", Georgia, 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.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.25rem;
  --text-5xl: 4rem;
  --text-6xl: 5rem;

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

  /* Radius — rounder / editorial ------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Shadows ----------------------------------------------------------- */
  --shadow-sm: 0 2px 6px -2px rgba(12, 12, 16, 0.08), 0 1px 2px rgba(12, 12, 16, 0.04);
  --shadow-md: 0 16px 40px -16px rgba(12, 12, 16, 0.2), 0 4px 10px -2px rgba(12, 12, 16, 0.05);
  --shadow-lg: 0 30px 60px -24px rgba(12, 12, 16, 0.28), 0 8px 16px -4px rgba(12, 12, 16, 0.08);
  --shadow-xl: 0 40px 80px -30px rgba(12, 12, 16, 0.35);
  --outline-focus: 2px solid var(--text-main);

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

  /* Alerts ------------------------------------------------------------ */
  --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 70%);
  --alert-success-bg: color-mix(in srgb, var(--color-success), white 88%);
  --alert-success-border: color-mix(in srgb, var(--color-success), white 75%);
  --alert-warning-bg: color-mix(in srgb, var(--color-secondary), white 70%);
  --alert-warning-border: color-mix(in srgb, var(--color-secondary), white 40%);
  --alert-error-bg: color-mix(in srgb, var(--color-error), white 88%);
  --alert-error-border: color-mix(in srgb, var(--color-error), white 75%);
  --alert-info-text: var(--color-info);
  --alert-success-text: var(--color-success);
  --alert-warning-text: #8a5c00;
  --alert-error-text: var(--color-error);

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

  /* Tag variants */
  --tag-bg: var(--bg-surface);
  --tag-text: var(--text-main);
  --tag-primary-bg: color-mix(in srgb, var(--color-primary), white 82%);
  --tag-success-bg: color-mix(in srgb, var(--color-success), white 82%);
  --tag-warning-bg: color-mix(in srgb, var(--color-secondary), white 70%);
  --tag-error-bg: color-mix(in srgb, var(--color-error), white 82%);
  --tag-info-bg: color-mix(in srgb, var(--color-info), white 82%);

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

  /* Card -------------------------------------------------------------- */
  --card-bg: #ffffff;
  --card-border: var(--border-subtle);
  --card-header-bg: transparent;
  --card-footer-border: var(--border-subtle);
  --card-image-height: 14rem;
  --card-image-width: 10rem;

  /* Navbar ------------------------------------------------------------ */
  --navbar-bg: color-mix(in srgb, var(--bg-base), transparent 8%);
  --navbar-border: transparent;

  /* Section Dark (newsletter, footer) --------------------------------- */
  --section-dark-bg: #0c0c10;
  --section-dark-text: #faf6ef;
  --section-dark-muted: rgba(250, 246, 239, 0.6);
  --section-dark-border: rgba(250, 246, 239, 0.1);
  --section-dark-card-bg: rgba(255, 255, 255, 0.04);
  --section-dark-card-hover-bg: rgba(255, 255, 255, 0.08);

  /* Hero -------------------------------------------------------------- */
  --hero-bg: var(--text-main);
  /* Two-layer scrim: a directional wash that darkens the text corner
     (bottom-left) while letting the image breathe toward the top-right,
     plus a vertical base that keeps the bottom edge anchored. */
  --hero-overlay:
    linear-gradient(to top right,
      color-mix(in srgb, var(--text-main), transparent 10%) 0%,
      color-mix(in srgb, var(--text-main), transparent 45%) 40%,
      color-mix(in srgb, var(--text-main), transparent 90%) 80%),
    linear-gradient(to top,
      color-mix(in srgb, var(--text-main), transparent 30%) 0%,
      color-mix(in srgb, var(--text-main), transparent 90%) 55%);

  /* Bar Sticky */
  --bar-sticky-bg: color-mix(in srgb, var(--text-main), transparent 12%);
  --bar-sticky-border: color-mix(in srgb, var(--text-inverted), transparent 92%);

  /* Carousel ---------------------------------------------------------- */
  --carousel-nav-bg: color-mix(in srgb, var(--text-main), transparent 45%);
  --carousel-nav-border: color-mix(in srgb, var(--text-inverted), transparent 88%);
  --carousel-nav-hover-bg: color-mix(in srgb, var(--text-main), transparent 25%);

  /* Stat -------------------------------------------------------------- */
  --stat-bg: #ffffff;
  --stat-border: var(--border-subtle);
  --stat-icon-bg: var(--bg-surface);
  --stat-icon-color: var(--text-main);

  /* Table ------------------------------------------------------------- */
  --table-bg: transparent;
  --table-header-bg: var(--bg-surface);
  --table-border: var(--border-subtle);
  --table-row-hover: color-mix(in srgb, var(--text-main), transparent 96%);
  --table-striped-bg: color-mix(in srgb, var(--bg-surface), white 40%);

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

  /* Code / blockquote */
  --code-bg: var(--bg-surface);
  --blockquote-border: var(--border-base);
  --blockquote-bg: color-mix(in srgb, var(--bg-surface), transparent 40%);

  /* Tooltip / toast / menu */
  --tooltip-bg: var(--text-main);
  --tooltip-text: var(--text-inverted);
  --toast-bg: #ffffff;
  --toast-shadow: var(--shadow-md);
  --message-bg: #ffffff;
  --message-border: var(--border-subtle);
  --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%);

  /* Dropdown / popover / panel / dialog / drawer */
  --dropdown-bg: #ffffff;
  --dropdown-border: var(--border-subtle);
  --dropdown-hover-bg: var(--bg-surface);
  --popover-bg: #ffffff;
  --popover-border: var(--border-base);
  --panel-bg: #ffffff;
  --panel-border: var(--border-subtle);
  --dialog-border: var(--border-subtle);
  --backdrop-bg: rgba(12, 12, 16, 0.55);
  --backdrop-blur: blur(3px);
  --details-bg: #ffffff;
  --details-header-bg: var(--bg-surface);
  --details-border: var(--border-subtle);
  --modal-width: 520px;
  --modal-bg: #ffffff;
  --accordion-border: var(--border-subtle);
  --accordion-header-bg: var(--bg-surface);
  --accordion-header-hover-bg: color-mix(in srgb, var(--bg-surface), black 5%);
  --drawer-bg: #ffffff;
  --drawer-border: var(--border-subtle);
  --list-group-bg: #ffffff;
  --list-group-border: var(--border-subtle);
  --list-group-hover-bg: var(--bg-surface);
  --offcanvas-bg: #ffffff;
  --bottom-nav-bg: #ffffff;
  --bottom-nav-border: var(--border-subtle);

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

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

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

  /* Misc */
  --progress-bg: var(--bg-surface);
  --progress-fill: var(--color-primary);
  --progress-height: 0.5rem;
  --spinner-color: var(--color-primary);
  --spinner-track: color-mix(in srgb, var(--spinner-color), transparent 75%);
  --spinner-size: 1.5rem;
  --toggle-bg: var(--border-subtle);
  --toggle-bg-checked: var(--color-primary);
  --toggle-knob: #ffffff;
  --range-track-bg: var(--border-subtle);
  --range-track-fill: var(--color-primary);
  --range-thumb: var(--color-primary);
  --rating-color: var(--border-base);
  --rating-color-active: var(--color-secondary);
  --skeleton-bg: color-mix(in srgb, var(--bg-surface), black 6%);
  --skeleton-shine: color-mix(in srgb, var(--skeleton-bg), black 10%);
  --box-bg: #ffffff;

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

  /* Mockup */
  --mockup-browser-bg: var(--bg-surface);
  --mockup-browser-border: var(--border-subtle);
  --mockup-browser-body-bg: #ffffff;
  --mockup-browser-url-bg: #ffffff;
  --mockup-phone-bg: var(--bg-surface);
  --mockup-phone-border: var(--border-base);
  --mockup-phone-body-bg: #ffffff;
  --mockup-window-bg: var(--bg-surface);
  --mockup-window-border: var(--border-subtle);
  --mockup-window-body-bg: #ffffff;
  --mockup-code-bg: #1e1e22;
  --mockup-code-text: #faf6ef;
  --mockup-code-line-nr: rgba(250, 246, 239, 0.4);

  /* 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), white 85%);
  --diff-remove-bg: color-mix(in srgb, var(--color-error), white 85%);

  /* Steps / timeline */
  --step-color: var(--border-base);
  --step-active-color: var(--color-primary);
  --step-complete-color: var(--color-success);
  --timeline-line: var(--border-subtle);
  --timeline-marker: var(--color-primary);
  --timeline-marker-ring: #ffffff;

  /* Bar chart / donut */
  --bar-chart-height: 12rem;
  --donut-chart-size: 8rem;
  --donut-chart-size-lg: 12rem;
  --donut-chart-center-bg: #ffffff;

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

  /* Layout breakpoints */
  --container-max-width: 1320px;
  --auth-card-max-width: 720px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;

  /* Hero carousel — dark-themed slides (default) */
  --hero-subtitle-color: color-mix(in srgb, var(--text-inverted), transparent 10%);
  --hero-text-shadow: 0 2px 16px color-mix(in srgb, var(--text-main), transparent 40%);
  --hero-meta-bg: color-mix(in srgb, var(--text-inverted), transparent 90%);
  --hero-meta-border: color-mix(in srgb, var(--text-inverted), transparent 75%);

  /* Hero carousel — light-themed slides (data-theme="light") */
  --hero-overlay-light:
    linear-gradient(to top right,
      color-mix(in srgb, var(--text-inverted), transparent 5%) 0%,
      color-mix(in srgb, var(--text-inverted), transparent 40%) 40%,
      color-mix(in srgb, var(--text-inverted), transparent 90%) 80%),
    linear-gradient(to top,
      color-mix(in srgb, var(--text-inverted), transparent 25%) 0%,
      color-mix(in srgb, var(--text-inverted), transparent 92%) 55%);
  --hero-subtitle-color-light: color-mix(in srgb, var(--text-main), transparent 20%);
  --hero-text-shadow-light: 0 2px 16px color-mix(in srgb, var(--text-inverted), transparent 30%);
  --hero-meta-bg-light: color-mix(in srgb, var(--text-main), transparent 88%);
  --hero-meta-border-light: color-mix(in srgb, var(--text-main), transparent 78%);

  /* Carousel pill navigation (floating dots over hero) */
  --carousel-pill-dot: color-mix(in srgb, var(--text-inverted), transparent 65%);
  --carousel-pill-dot-hover: color-mix(in srgb, var(--text-inverted), transparent 40%);
  --carousel-pill-shadow: var(--shadow-md);

  /* Buttons — dark + accent-ghost */
  --btn-dark-hover-bg: color-mix(in srgb, var(--text-main), var(--text-inverted) 12%);
  --btn-accent-ghost-border: color-mix(in srgb, var(--text-inverted), transparent 70%);
  --btn-accent-ghost-border-light: color-mix(in srgb, var(--text-main), transparent 65%);

  /* Feature tile (category card) */
  --feature-tile-hover-icon-bg: color-mix(in srgb, var(--text-inverted), transparent 82%);
  --feature-tile-hover-muted: color-mix(in srgb, var(--text-inverted), transparent 15%);

  /* Event card */
  --event-card-tag-bg: color-mix(in srgb, var(--text-main), transparent 25%);

  /* Featured editorial hero (asymmetric big card) */
  --featured-hero-overlay: linear-gradient(180deg,
    color-mix(in srgb, var(--text-main), transparent 100%) 30%,
    color-mix(in srgb, var(--text-main), transparent 15%) 100%);

  /* Auth page ambient */
  --auth-page-glow:
    radial-gradient(ellipse at 85% 10%, color-mix(in srgb, var(--color-secondary), transparent 72%) 0%, transparent 45%),
    radial-gradient(ellipse at 8% 92%, color-mix(in srgb, var(--color-primary), transparent 82%) 0%, transparent 50%);
  --auth-page-mark-color: color-mix(in srgb, var(--text-main), transparent 96.5%);

  /* Navbar sticky */
  --navbar-sticky-bg-scrolled: color-mix(in srgb, var(--bg-base), transparent 4%);
  --navbar-sticky-shadow-scrolled: 0 6px 18px -10px color-mix(in srgb, var(--text-main), transparent 90%);
  --navbar-search-focus-ring: 0 0 0 3px color-mix(in srgb, var(--text-main), transparent 92%);

  /* City chip */
  --city-chip-hover-muted: color-mix(in srgb, var(--text-inverted), transparent 20%);

  /* Newsletter */
  --newsletter-glow:
    radial-gradient(circle at 90% 30%, color-mix(in srgb, var(--color-secondary), transparent 78%) 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, color-mix(in srgb, var(--color-primary), transparent 78%) 0%, transparent 50%);
  --newsletter-form-bg: color-mix(in srgb, var(--text-inverted), transparent 92%);
  --newsletter-form-border: color-mix(in srgb, var(--text-inverted), transparent 85%);
  --newsletter-form-placeholder: color-mix(in srgb, var(--text-inverted), transparent 45%);

  /* Public footer */
  --footer-public-text: color-mix(in srgb, var(--text-inverted), transparent 25%);
  --footer-public-link: color-mix(in srgb, var(--text-inverted), transparent 30%);
  --footer-public-border: color-mix(in srgb, var(--text-inverted), transparent 90%);
  --footer-public-bottom: color-mix(in srgb, var(--text-inverted), transparent 50%);
}
}

/* Display typography & headline treatment — lives outside @layer so it wins
   over classless heading defaults without extra specificity fights. */

body {
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1:not([class]), h2:not([class]), h3:not([class]),
.hero-title, .text-display, .title, .card-title, .navbar-brand {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "wght" 700;
  letter-spacing: -0.025em;
}

.hero-title {
  font-variation-settings: "opsz" 96, "wght" 600;
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 20ch;
}

.text-display {
  font-variation-settings: "opsz" 60, "wght" 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.text-display em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}