/**
 * Cubner Design System — runtime tokens
 * Source: .cursor/design-system/tokens.css
 */
:root {
  --cubner-color-brand-blue: #00518c;
  --cubner-color-brand-orange: #f49b27;
  --cubner-color-brand-red: #e63d11;
  --cubner-color-brand-green: #298e30;
  --cubner-color-brand-black: #1c1c1b;
  --cubner-color-ink-900: #002828;
  --cubner-color-navy-900: #00375e;
  --cubner-color-blue-050: #eaf6ff;
  --cubner-color-neutral-600: #616161;
  --cubner-color-neutral-400: #a1a1b2;
  --cubner-color-neutral-300: #d1d6e0;
  --cubner-color-neutral-250: #e0e8ed;
  --cubner-color-neutral-200: #e8edf2;
  --cubner-color-orange-050: #fff4e3;
  --cubner-color-white: #fff;
  --cubner-color-black: #000;
  --cubner-color-neutral-025: #fbfbfd;
  --cubner-color-neutral-050: #f5f6f9;
  --cubner-color-neutral-500: #6b7280;
  --cubner-color-neutral-210: #e5e7eb;
  --cubner-bg-page: var(--cubner-color-white);
  --cubner-bg-surface: var(--cubner-color-white);
  --cubner-bg-muted: var(--cubner-color-neutral-025);
  --cubner-bg-devis: var(--cubner-color-neutral-050);
  --cubner-bg-checkout: var(--cubner-color-neutral-025);
  --cubner-bg-warm: var(--cubner-color-orange-050);
  --cubner-bg-info: var(--cubner-color-blue-050);
  --cubner-bg-dark: var(--cubner-color-navy-900);
  --cubner-text-primary: var(--cubner-color-brand-black);
  --cubner-text-usage: var(--cubner-color-ink-900);
  --cubner-text-secondary: var(--cubner-color-neutral-600);
  --cubner-text-devis-muted: var(--cubner-color-neutral-500);
  --cubner-border-devis: var(--cubner-color-neutral-210);
  --cubner-text-disabled: var(--cubner-color-neutral-400);
  --cubner-text-inverse: var(--cubner-color-white);
  --cubner-heading-accent: var(--cubner-color-brand-blue);
  --cubner-action-primary: var(--cubner-color-brand-orange);
  --cubner-action-project: var(--cubner-color-brand-red);
  --cubner-border-blog: var(--cubner-color-neutral-250);
  --cubner-focus-color: var(--cubner-color-brand-blue);
  --cubner-overlay-hero: rgb(0 55 94 / 80%);
  --cubner-font-family: "Switzer", Arial, sans-serif;
  --cubner-font-light: 300;
  --cubner-font-regular: 400;
  --cubner-font-semibold: 600;
  --cubner-font-bold: 700;
  --cubner-text-14: 0.875rem;
  --cubner-text-16: 1rem;
  --cubner-text-18: 1.125rem;
  --cubner-text-20: 1.25rem;
  --cubner-text-22: 1.375rem;
  --cubner-text-25: 1.5625rem;
  --cubner-text-26: 1.625rem;
  --cubner-text-30: 1.875rem;
  --cubner-text-36: 2.25rem;
  --cubner-text-38: 2.375rem;
  --cubner-text-51: 3.1875rem;
  --cubner-leading-compact: 1.132;
  --cubner-leading-relaxed: 1.595;
  --cubner-radius: 8px;
  --cubner-radius-button: var(--cubner-radius);
  --cubner-radius-service: var(--cubner-radius);
  --cubner-radius-media: var(--cubner-radius);
  --cubner-radius-usage: var(--cubner-radius);
  --cubner-radius-card: var(--cubner-radius);
  --cubner-radius-blog-featured: var(--cubner-radius);
  --cubner-radius-blog-card: var(--cubner-radius);
  --cubner-radius-blog-media: var(--cubner-radius);
  --cubner-radius-overlay: var(--cubner-radius);
  --cubner-radius-checkout: var(--cubner-radius);
  --cubner-radius-input: var(--cubner-radius);
  --cubner-radius-shop: var(--cubner-radius);
  --cubner-radius-devis: var(--cubner-radius);
  --cubner-radius-devis-input: var(--cubner-radius);
  --cubner-radius-pill: 999px;
  --cubner-shadow-service: 0 4px 11px rgb(0 0 0 / 8%);
  --cubner-shadow-card: 0 4px 22px rgb(0 0 0 / 8%);
  --cubner-shadow-blog-featured: 0 4px 8px rgb(0 0 0 / 6%);
  --cubner-shadow-blog-card: 0 4px 16px rgb(0 0 0 / 6%);
  --cubner-shadow-shop-card: 0 4px 14px rgb(0 0 0 / 6%);
  --cubner-shadow-review: 0 4px 26.2px rgb(0 0 0 / 5%);
  --cubner-shadow-header: 0 0 14.7px 0 rgb(0 0 0 / 12%);
  --cubner-container-max: 1400px;
  --cubner-button-height: 44px;

  /* États interactifs inférés (implementation.md — non Figma) */
  --cubner-hover-filter: brightness(0.9);
  --cubner-hover-image-filter: brightness(0.96);
  --cubner-hover-duration: 150ms;
  --cubner-hover-link-opacity: 0.8;
  --cubner-shadow-card-hover: 0 4px 22px rgb(0 0 0 / 12%);
  --cubner-shadow-blog-card-hover: 0 4px 16px rgb(0 0 0 / 8%);
  --cubner-shadow-shop-card-hover: 0 4px 14px rgb(0 0 0 / 8%);
  --cubner-shadow-blog-featured-hover: 0 4px 8px rgb(0 0 0 / 8%);
}

.cubner-container {
  box-sizing: border-box;
  width: min(100% - 48px, var(--cubner-container-max));
  margin-inline: auto;
}

.cubner-button:focus-visible,
.cubner-focusable:focus-visible {
  outline: 3px solid var(--cubner-focus-color);
  outline-offset: 3px;
}

@media (max-width: 1199px) {
  .cubner-container {
    width: min(100% - 40px, var(--cubner-container-max));
  }
}

@media (max-width: 767px) {
  .cubner-container {
    width: min(100% - 32px, var(--cubner-container-max));
  }
}