/* MJT 2026 — Design Tokens — Québec premium palette */

:root,
[data-theme="light"] {
  color-scheme: light;

  --mjt-color-charcoal: #1B1B1D;
  --mjt-color-bg: #FAFAF8;
  --mjt-color-cream: #FAFAF8;
  --mjt-color-bg-alt: #E7E2D7;
  --mjt-color-bg-dark: #1B1B1D;
  --mjt-color-topbar-bg: #1B1B1D;
  --mjt-color-topbar-text: #FAFAF8;
  --mjt-color-surface: #FFFFFF;
  --mjt-color-surface-elevated: #FFFFFF;
  --mjt-color-text: #1B1B1D;
  --mjt-color-text-muted: #5C5A57;
  --mjt-color-text-inverse: #FAFAF8;
  --mjt-color-accent: #7A0F18;
  --mjt-color-accent-hover: #5E0C12;
  --mjt-color-accent-soft: rgba(122, 15, 24, 0.1);
  --mjt-color-beige: #E7E2D7;
  --mjt-color-gold: #C6A15B;
  --mjt-color-gold-subtle: rgba(198, 161, 91, 0.22);
  --mjt-color-border: rgba(27, 27, 29, 0.12);
  --mjt-color-overlay: rgba(42, 38, 36, 0.52);
  --mjt-color-input-bg: #FFFFFF;
  --mjt-color-success-bg: #d4edda;
  --mjt-color-success-text: #155724;
  --mjt-color-error-bg: #f8d7da;
  --mjt-color-error-text: #721c24;

  --mjt-notice-radius: var(--mjt-radius-md);
  --mjt-notice-icon-size: 2.125rem;
  --mjt-notice-error-bg: color-mix(in srgb, var(--mjt-color-accent) 5.5%, var(--mjt-color-surface));
  --mjt-notice-error-border: color-mix(in srgb, var(--mjt-color-accent) 20%, var(--mjt-color-border));
  --mjt-notice-error-accent: var(--mjt-color-accent);
  --mjt-notice-success-bg: color-mix(in srgb, #2d6a4f 7%, var(--mjt-color-surface));
  --mjt-notice-success-border: color-mix(in srgb, #2d6a4f 24%, var(--mjt-color-border));
  --mjt-notice-success-accent: #2d6a4f;
  --mjt-notice-info-bg: color-mix(in srgb, #2f5f9c 6%, var(--mjt-color-surface));
  --mjt-notice-info-border: color-mix(in srgb, #2f5f9c 22%, var(--mjt-color-border));
  --mjt-notice-info-accent: #2f5f9c;
  --mjt-notice-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237A0F18' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v4m0 4h.01M10.29 3.86l-8.4 14.54A2 2 0 003.62 21h16.76a2 2 0 001.73-3.6L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3C/svg%3E");
  --mjt-notice-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232d6a4f' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
  --mjt-notice-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232f5f9c' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");

  --mjt-font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mjt-font-body: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --mjt-radius-sm: 8px;
  --mjt-radius-md: 16px;
  --mjt-radius-lg: 24px;
  --mjt-radius-xl: 32px;
  --mjt-radius-full: 9999px;

  --mjt-shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.06);
  --mjt-shadow-md: 0 8px 24px rgba(17, 17, 17, 0.08);
  --mjt-shadow-lg: 0 16px 48px rgba(17, 17, 17, 0.12);
  --mjt-shadow-card: 0 4px 20px rgba(17, 17, 17, 0.07);

  --mjt-space-xs: 0.5rem;
  --mjt-space-sm: 1rem;
  --mjt-space-md: 1.5rem;
  --mjt-space-lg: 2.5rem;
  --mjt-space-xl: 4rem;
  --mjt-space-2xl: 6rem;
  --mjt-space-3xl: 8rem;
  --mjt-section-y: clamp(3.5rem, 8vw, 6rem);

  --mjt-container: 1280px;
  --mjt-topbar-height: 40px;
  --mjt-header-height: 104px;
  --mjt-nav-height: 52px;
  --mjt-sticky-offset: calc(var(--mjt-topbar-height) + var(--mjt-header-height) + var(--mjt-nav-height));
  --mjt-sticky-offset-compact: 64px;
  --mjt-wp-admin-offset: 0px;
  --mjt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mjt-transition: 0.35s var(--mjt-ease-out);
  --mjt-transition-fast: 0.2s ease;
  --mjt-shadow-button-hover: 0 6px 20px rgba(42, 38, 36, 0.12);
  --mjt-lift-hover: -2px;

  /* Canonical breakpoints (use in @media; CSS vars are documentation + JS sync):
     --mjt-bp-xs: 480  | phone narrow
     --mjt-bp-sm: 768  | phone / tablet portrait (max-width: 767)
     --mjt-bp-md: 992  | tablet landscape (max-width: 991)
     --mjt-bp-lg: 1100 | desktop nav + mega-menu (max-width: 1099)
     --mjt-bp-xxs: 400 | shop single-column floor */
  --mjt-bp-xxs: 400px;
  --mjt-bp-xs: 480px;
  --mjt-bp-sm: 768px;
  --mjt-bp-md: 992px;
  --mjt-bp-lg: 1100px;
  --mjt-touch-min: 44px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --mjt-color-cream: #111113;
  --mjt-color-bg: #111113;
  --mjt-color-bg-alt: #1B1B1D;
  --mjt-color-bg-dark: #0A0A0B;
  --mjt-color-topbar-bg: #0A0A0B;
  --mjt-color-topbar-text: #FAFAF8;
  --mjt-color-surface: #1B1B1D;
  --mjt-color-surface-elevated: #242426;
  --mjt-color-text: #FAFAF8;
  --mjt-color-text-muted: #A8A6A2;
  --mjt-color-text-inverse: #FAFAF8;
  --mjt-color-charcoal: #FAFAF8;
  --mjt-color-accent: #9B1824;
  --mjt-color-accent-hover: #B81E2C;
  --mjt-color-accent-soft: rgba(155, 24, 36, 0.2);
  --mjt-color-beige: #2E2C28;
  --mjt-color-border: rgba(250, 248, 245, 0.12);
  --mjt-color-overlay: rgba(0, 0, 0, 0.75);
  --mjt-color-input-bg: #2A2A2A;
  --mjt-color-success-bg: rgba(45, 106, 79, 0.2);
  --mjt-color-success-text: #7dcea0;
  --mjt-color-error-bg: rgba(196, 59, 59, 0.2);
  --mjt-color-error-text: #f5a5a5;
  --mjt-notice-error-bg: color-mix(in srgb, var(--mjt-color-accent) 16%, var(--mjt-color-surface-elevated));
  --mjt-notice-error-border: color-mix(in srgb, var(--mjt-color-accent) 32%, var(--mjt-color-border));
  --mjt-notice-error-accent: #f08a94;
  --mjt-notice-success-bg: color-mix(in srgb, #2d6a4f 18%, var(--mjt-color-surface-elevated));
  --mjt-notice-success-border: color-mix(in srgb, #7dcea0 28%, var(--mjt-color-border));
  --mjt-notice-success-accent: #7dcea0;
  --mjt-notice-info-bg: color-mix(in srgb, #4a7fc4 14%, var(--mjt-color-surface-elevated));
  --mjt-notice-info-border: color-mix(in srgb, #9ec5f7 24%, var(--mjt-color-border));
  --mjt-notice-info-accent: #9ec5f7;
  --mjt-notice-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f08a94' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v4m0 4h.01M10.29 3.86l-8.4 14.54A2 2 0 003.62 21h16.76a2 2 0 001.73-3.6L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3C/svg%3E");
  --mjt-notice-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237dcea0' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
  --mjt-notice-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ec5f7' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
  --mjt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --mjt-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --mjt-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --mjt-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --mjt-color-cream: #111113;
    --mjt-color-bg: #111113;
    --mjt-color-bg-alt: #1B1B1D;
    --mjt-color-bg-dark: #0A0A0B;
    --mjt-color-topbar-bg: #0A0A0B;
    --mjt-color-topbar-text: #FAFAF8;
    --mjt-color-surface: #1B1B1D;
    --mjt-color-surface-elevated: #242426;
    --mjt-color-text: #FAFAF8;
    --mjt-color-text-muted: #A8A6A2;
    --mjt-color-text-inverse: #FAFAF8;
    --mjt-color-charcoal: #FAFAF8;
    --mjt-color-accent: #9B1824;
    --mjt-color-accent-hover: #B81E2C;
    --mjt-color-accent-soft: rgba(155, 24, 36, 0.2);
    --mjt-color-beige: #2E2C28;
    --mjt-color-border: rgba(250, 248, 245, 0.12);
    --mjt-color-overlay: rgba(0, 0, 0, 0.75);
    --mjt-color-input-bg: #2A2A2A;
    --mjt-color-success-bg: rgba(45, 106, 79, 0.2);
    --mjt-color-success-text: #7dcea0;
    --mjt-color-error-bg: rgba(196, 59, 59, 0.2);
    --mjt-color-error-text: #f5a5a5;
    --mjt-notice-error-bg: color-mix(in srgb, var(--mjt-color-accent) 16%, var(--mjt-color-surface-elevated));
    --mjt-notice-error-border: color-mix(in srgb, var(--mjt-color-accent) 32%, var(--mjt-color-border));
    --mjt-notice-error-accent: #f08a94;
    --mjt-notice-success-bg: color-mix(in srgb, #2d6a4f 18%, var(--mjt-color-surface-elevated));
    --mjt-notice-success-border: color-mix(in srgb, #7dcea0 28%, var(--mjt-color-border));
    --mjt-notice-success-accent: #7dcea0;
    --mjt-notice-info-bg: color-mix(in srgb, #4a7fc4 14%, var(--mjt-color-surface-elevated));
    --mjt-notice-info-border: color-mix(in srgb, #9ec5f7 24%, var(--mjt-color-border));
    --mjt-notice-info-accent: #9ec5f7;
    --mjt-notice-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f08a94' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v4m0 4h.01M10.29 3.86l-8.4 14.54A2 2 0 003.62 21h16.76a2 2 0 001.73-3.6L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3C/svg%3E");
    --mjt-notice-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237dcea0' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
    --mjt-notice-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ec5f7' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
    --mjt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --mjt-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --mjt-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --mjt-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
  }
}

/* Collapsed nav on mobile/tablet */
@media (max-width: 1099px) {
  :root {
    --mjt-nav-height: 0px;
    --mjt-header-height: 60px;
    --mjt-topbar-height: 36px;
    --mjt-sticky-offset: calc(var(--mjt-topbar-height) + var(--mjt-header-height));
    --mjt-sticky-offset-compact: 60px;
  }
}

@media (max-width: 767px) {
  :root {
    --mjt-topbar-height: 36px;
    --mjt-header-height: 56px;
    --mjt-sticky-offset: calc(var(--mjt-topbar-height) + var(--mjt-header-height));
    --mjt-sticky-offset-compact: 56px;
  }
}