/* Yoane Cinema Glass. Palette canonique : 12 couleurs, pas une de plus.
   data-brand ne surcharge que --yc-accent et --yc-accent-hover. */

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

  --yc-bg: #05070a;
  --yc-bg-2: #09090b;
  --yc-surface-1: #0f1114;
  --yc-surface-2: #16181c;
  --yc-text-1: #fafafa;
  --yc-text-2: #a1a1aa;
  --yc-text-3: #8a8a93;
  --yc-line: #26272b;
  --yc-accent: #22d3ee;
  --yc-accent-hover: #67e8f9;
  --yc-wa: #25d366;
  --yc-danger: #c27c7c;

  /* Bordure de survol, gris neutre, hors des 12. */
  --yc-line-hover: #3f3f46;

  --yc-brand-name: "Yoane";

  --yc-grad-text: linear-gradient(90deg, #fafafa, #22d3ee);

  --yc-glow-focus: 0 0 12px rgba(34, 211, 238, 0.22);
  --yc-glow-cta: 0 8px 24px rgba(34, 211, 238, 0.16);

  --yc-hero-halo: radial-gradient(ellipse 42% 36% at 72% 40%, rgba(34, 211, 238, 0.06), transparent 70%);

  --yc-overlay-desktop: linear-gradient(90deg, rgba(5, 7, 10, 0.92) 0%, rgba(5, 7, 10, 0.58) 38%, rgba(5, 7, 10, 0.18) 72%), linear-gradient(180deg, rgba(5, 7, 10, 0.28) 0%, transparent 16%, transparent 78%, #05070a 100%);
  --yc-overlay-mobile: linear-gradient(180deg, rgba(5, 7, 10, 0.35) 0%, transparent 18%, transparent 52%, rgba(5, 7, 10, 0.78) 84%, #05070a 100%);
  --yc-overlay-bottom: linear-gradient(180deg, transparent 46%, rgba(5, 7, 10, 0.78) 100%);

  --yc-glass-header-bg: rgba(15, 17, 20, 0.88);
  --yc-glass-header-blur: 20px;
  --yc-glass-float-bg: rgba(15, 17, 20, 0.92);
  --yc-glass-float-blur: 16px;

  --yc-font-display: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --yc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --yc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --yc-fs-display: clamp(2.6rem, 6vw, 4.75rem);
  --yc-fs-h1: clamp(2.8rem, 5.1vw, 76px);
  --yc-fs-h1-mobile: clamp(1.85rem, 7.4vw, 2.15rem);
  --yc-fs-h2: clamp(2rem, 4vw, 3rem);
  --yc-fs-h3: 1.25rem;
  --yc-fs-h3-card: 1.125rem;
  --yc-fs-lead: 18px;
  --yc-fs-body: 16px;
  --yc-fs-small: 14px;
  --yc-fs-caption: 12px;
  --yc-fs-meta: 12px;

  --yc-fw-regular: 400;
  --yc-fw-medium: 500;
  --yc-fw-bold: 700;
  --yc-fw-extrabold: 800;
  --yc-fw-black: 900;

  --yc-lh-display: 1.05;
  --yc-lh-h1: 1.05;
  --yc-lh-h2: 1.08;
  --yc-lh-h3: 1.3;
  --yc-lh-lead: 1.55;
  --yc-lh-body: 1.6;
  --yc-lh-ui: 1.4;
  --yc-lh-solid: 1;

  --yc-ls-display: -0.03em;
  --yc-ls-h1: -0.03em;
  --yc-ls-h2: -0.02em;
  --yc-ls-h3: -0.01em;
  --yc-ls-wordmark: -0.02em;
  --yc-ls-body: 0em;
  --yc-ls-ui: 0.02em;
  --yc-ls-caption: 0.02em;
  --yc-ls-kicker: 0.08em;
  --yc-ls-eyebrow: 0.08em;

  --yc-space-0: 0px;
  --yc-space-1: 4px;
  --yc-space-2: 8px;
  --yc-space-3: 12px;
  --yc-space-4: 16px;
  --yc-space-5: 20px;
  --yc-space-6: 24px;
  --yc-space-7: 28px;
  --yc-space-8: 32px;
  --yc-space-10: 40px;
  --yc-space-12: 48px;
  --yc-space-14: 56px;
  --yc-space-16: 64px;
  --yc-space-20: 80px;
  --yc-space-24: 96px;
  --yc-space-28: 112px;
  --yc-space-35: 140px;
  --yc-gutter: 24px;
  --yc-gutter-mobile: 16px;
  --yc-section: clamp(80px, 12vw, 140px);
  --yc-band: clamp(72px, 9vw, 112px);

  --yc-size-dot: 8px;
  --yc-size-icon-sm: 16px;
  --yc-size-icon-md: 20px;
  --yc-size-icon-lg: 24px;
  --yc-size-mark: 32px;
  --yc-size-touch: 44px;
  --yc-size-control-sm: 36px;
  --yc-size-control-md: 48px;
  --yc-size-control-lg: 56px;
  --yc-size-nav: 64px;
  --yc-size-nav-offset: 12px;
  --yc-container: 1200px;
  --yc-nav-max: 1280px;
  --yc-copy: 640px;
  --yc-measure: 65ch;
  --yc-stroke: 1.5px;
  --yc-preview-mobile: 390px;

  --yc-radius-sm: 8px;
  --yc-radius-md: 12px;
  --yc-radius-lg: 16px;
  --yc-radius-full: 999px;

  --yc-shadow-0: none;
  --yc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --yc-shadow-2: 0 12px 32px -16px rgba(0, 0, 0, 0.55);
  --yc-shadow-3: 0 24px 48px -24px rgba(0, 0, 0, 0.6);

  --yc-opacity-disabled: 0.4;

  --yc-z-base: 0;
  --yc-z-content: 1;
  --yc-z-float: 2;
  --yc-z-hero: 4;
  --yc-z-sticky: 40;
  --yc-z-overlay: 50;
  --yc-z-skip: 80;

  --yc-bp-md: 768px;
  --yc-bp-lg: 1024px;
  --yc-bp-nav: 1280px;
  --yc-bp-wide: 1440px;

  --yc-grid-columns: 12;
  --yc-grid-gap: 16px;

  --yc-duration-fast: 150ms;
  --yc-duration-base: 180ms;
  --yc-duration-enter: 240ms;
  --yc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --yc-parallax-pointer: 12px;
  --yc-press: 1px;

  --yc-ratio-video: 16 / 9;
  --yc-ratio-wide: 16 / 10;
  --yc-ratio-portrait: 4 / 5;
  --yc-ratio-square: 1 / 1;
}

[data-brand="yoane"] {
  --yc-accent: #22d3ee;
  --yc-accent-hover: #67e8f9;
}

[data-brand="doc4geeks"] {
  --yc-accent: #06b6d4;
  --yc-accent-hover: #67e8f9;
}