/* ============================================================
   Mercure Design System — Tokens
   Source of truth for color, type, space, radius, motion.
   Extracted from lab-b.css + lab-robot.css and formalized
   into a primitive ▸ semantic layer system.
   ============================================================ */

@font-face {
  font-family: 'Brockmann';
  src: url('../assets/fonts/Brockmann-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Until Brockmann Regular + Bold are licensed, allow the browser to
   synthesize the missing weights. Acceptable for UI, less so for long
   reading text — flag to revisit when font files are acquired. */
body {
  font-synthesis: weight;
}

:root {

  /* ════════════════════════════════════════════════════════
     PRIMITIVE — raw values, never used directly in components
     ════════════════════════════════════════════════════════ */

  /* ── Color · backgrounds (dark scale) ── */
  --mc-bg-1:        #0a0b10;
  --mc-bg-2:        #0e1018;
  --mc-card-1:      #14161e;
  --mc-card-2:      #1a1d2a;
  --mc-card-3:      #20232f;

  /* ── Color · ink (text) ── */
  --mc-ink-1:       #f0eef0;                         /* warm white, never pure #fff */
  --mc-ink-2:       rgba(240, 238, 240, 0.62);
  --mc-ink-3:       rgba(240, 238, 240, 0.40);

  /* ── Color · lines (borders) ── */
  --mc-line-1:      rgba(255, 255, 255, 0.08);
  --mc-line-2:      rgba(255, 255, 255, 0.16);

  /* ── Color · brand accents ── */
  --mc-indigo:      #6b7cff;                         /* action, primary CTA */
  --mc-mauve:       #b88cff;                         /* brand mark, M filigrane */
  --mc-cyan:        #4dd6ff;                         /* data signal, status */
  --mc-glow:        rgba(107, 124, 255, 0.45);       /* halo signature */

  /* ── Color · system states (PROPOSED — not in original code) ── */
  --mc-success:     #5be3a8;
  --mc-warn:        #e8b46a;
  --mc-error:       #ff7a8c;

  /* ── Typography · families ── */
  --mc-font-display: 'Brockmann', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mc-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Typography · scale (fluid clamp) ── */
  --mc-type-micro:      11px;
  --mc-type-small:      13px;
  --mc-type-body:       15px;
  --mc-type-lead:       17px;
  --mc-type-display-s:  clamp(20px, 1.8vw, 26px);
  --mc-type-display-m:  clamp(24px, 2.6vw, 36px);
  --mc-type-display-l:  clamp(28px, 3.6vw, 56px);
  --mc-type-display-xl: clamp(36px, 4.2vw, 64px);
  --mc-type-display-2xl: clamp(40px, 5vw, 76px);
  --mc-type-display-3xl: clamp(56px, 7vw, 124px);
  --mc-type-display-4xl: clamp(160px, 24vw, 380px);  /* statement number */

  /* ── Typography · letter-spacing ── */
  --mc-tracking-base:    -0.011em;     /* body */
  --mc-tracking-tight-s: -0.012em;     /* UI labels */
  --mc-tracking-tight-m: -0.028em;     /* display-m / display-l */
  --mc-tracking-tight-l: -0.036em;     /* display-xl */
  --mc-tracking-tight-xl: -0.04em;     /* display-2xl */
  --mc-tracking-tight-2xl: -0.062em;   /* display-4xl */
  --mc-tracking-wide-s:  0.22em;       /* mono caps body */
  --mc-tracking-wide-m:  0.28em;       /* eyebrow */
  --mc-tracking-wide-l:  0.42em;       /* brand lockup caps */

  /* ── Typography · line-height ── */
  --mc-leading-display-tight: 1.0;
  --mc-leading-display:       1.1;
  --mc-leading-display-loose: 1.18;
  --mc-leading-body:          1.55;
  --mc-leading-body-loose:    1.6;

  /* ── Spacing scale (base-4, typographic rhythm) ── */
  --mc-space-0:   0;
  --mc-space-1:   4px;     /* hairline */
  --mc-space-2:   8px;     /* inter-line dense */
  --mc-space-3:   12px;
  --mc-space-4:   16px;    /* paragraph */
  --mc-space-5:   20px;
  --mc-space-6:   24px;    /* block */
  --mc-space-7:   32px;
  --mc-space-8:   40px;
  --mc-space-9:   56px;    /* section-inner */
  --mc-space-10:  80px;    /* section-padding */
  --mc-space-11:  120px;   /* section-padding-hero */

  /* ── Radius scale ── */
  --mc-radius-xs:   8px;
  --mc-radius-sm:   11px;
  --mc-radius-md:   12px;
  --mc-radius-lg:   16px;
  --mc-radius-xl:   20px;
  --mc-radius-2xl:  24px;
  --mc-radius-full: 999px;

  /* ── Motion · easings ── */
  --mc-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);    /* default */
  --mc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);        /* soft-land */
  --mc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* overshoot */

  /* ── Motion · durations ── */
  --mc-dur-micro:   200ms;     /* hover color, label */
  --mc-dur-short:   400ms;     /* layout state, padding */
  --mc-dur-medium:  700ms;     /* fade, reveal */
  --mc-dur-long:    1300ms;    /* scene reveal (Spline, vidéo) */
  --mc-dur-ambient: 7000ms;    /* breathing loops — heart rate, not animation */

  /* ── Glass surface tokens ── */
  --mc-glass-bg:           rgba(255, 255, 255, 0.035);
  --mc-glass-bg-hover:     rgba(255, 255, 255, 0.055);
  --mc-glass-bg-strong:    rgba(20, 22, 30, 0.42);          /* nav dock at rest */
  --mc-glass-bg-strong-on: rgba(20, 22, 30, 0.82);          /* nav dock scrolled */
  --mc-glass-border:       rgba(255, 255, 255, 0.08);
  --mc-glass-border-hover: rgba(107, 124, 255, 0.30);
  --mc-glass-blur:         22px;
  --mc-glass-blur-cta:     20px;
  --mc-glass-saturate:     1.4;
  --mc-glass-highlight:    linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  --mc-glass-shadow-rest:  0 14px 38px -16px rgba(0, 0, 0, 0.7);
  --mc-glass-shadow-hover: 0 30px 80px -30px var(--mc-glow);

  /* ── Layout ── */
  --mc-container-max:     1320px;
  --mc-container-padding: clamp(20px, 4vw, 56px);
  --mc-section-gap:       clamp(80px, 12vw, 160px);


  /* ════════════════════════════════════════════════════════
     SEMANTIC — use these in components.
     If a value changes for theming, only the semantic layer
     needs editing — primitives stay constant.
     ════════════════════════════════════════════════════════ */

  /* ── Surfaces ── */
  --surface-page:          var(--mc-bg-1);
  --surface-alt:           var(--mc-bg-2);
  --surface-card:          var(--mc-card-1);
  --surface-card-elev:     var(--mc-card-2);
  --surface-card-elev-2:   var(--mc-card-3);
  --surface-glass:         var(--mc-glass-bg);
  --surface-glass-hover:   var(--mc-glass-bg-hover);

  /* ── Text ── */
  --text-primary:          var(--mc-ink-1);
  --text-body:             var(--mc-ink-2);
  --text-muted:            var(--mc-ink-3);
  --text-on-accent:        #ffffff;

  /* ── Borders ── */
  --border-subtle:         var(--mc-line-1);
  --border-active:         var(--mc-line-2);
  --border-brand:          var(--mc-glass-border-hover);

  /* ── Brand roles ── */
  --action-primary:        var(--mc-indigo);
  --action-primary-soft:   rgba(107, 124, 255, 0.32);
  --brand-mark:            var(--mc-mauve);
  --data-signal:           var(--mc-cyan);
  --signature-glow:        var(--mc-glow);

  /* ── State colors (proposed) ── */
  --state-success:         var(--mc-success);
  --state-warn:            var(--mc-warn);
  --state-error:           var(--mc-error);

  /* ── Type roles ── */
  --type-display:          var(--mc-font-display);
  --type-body-family:      var(--mc-font-body);
  --type-mono:             var(--mc-font-mono);
}


/* ════════════════════════════════════════════════════════
   THEME · LIGHT
   Overrides ONLY the semantic layer. Primitives stay constant.
   Trigger via [data-theme="light"] on <html>.
   The same accents (indigo/mauve/cyan) survive both modes —
   they're saturated enough to read on either ground.
   ════════════════════════════════════════════════════════ */
[data-theme="light"] {

  /* ── Light primitives (cool, never warm) ── */
  --mc-paper-1:        #f4f3f6;                          /* page background */
  --mc-paper-2:        #ebeaf0;                          /* section alt */
  --mc-paper-3:        #ffffff;                          /* card */
  --mc-paper-4:        #e2e1e8;                          /* card elev */
  --mc-ink-d-1:        #1a1c24;                          /* deep ink */
  --mc-ink-d-2:        rgba(26, 28, 36, 0.72);
  --mc-ink-d-3:        rgba(26, 28, 36, 0.48);
  --mc-line-d-1:       rgba(10, 11, 16, 0.08);
  --mc-line-d-2:       rgba(10, 11, 16, 0.18);

  /* ── Semantic re-bindings ── */
  --surface-page:          var(--mc-paper-1);
  --surface-alt:           var(--mc-paper-2);
  --surface-card:          var(--mc-paper-3);
  --surface-card-elev:     var(--mc-paper-4);
  --surface-card-elev-2:   var(--mc-paper-4);

  --text-primary:          var(--mc-ink-d-1);
  --text-body:             var(--mc-ink-d-2);
  --text-muted:            var(--mc-ink-d-3);
  --text-on-accent:        #ffffff;

  --border-subtle:         var(--mc-line-d-1);
  --border-active:         var(--mc-line-d-2);

  /* ── Glass on light ── */
  --mc-glass-bg:           rgba(255, 255, 255, 0.55);
  --mc-glass-bg-hover:     rgba(255, 255, 255, 0.78);
  --mc-glass-bg-strong:    rgba(244, 243, 246, 0.62);
  --mc-glass-bg-strong-on: rgba(244, 243, 246, 0.92);
  --mc-glass-border:       rgba(10, 11, 16, 0.06);
  --mc-glass-shadow-rest:  0 14px 38px -16px rgba(20, 22, 40, 0.18);
  --mc-glass-shadow-hover: 0 30px 80px -30px rgba(107, 124, 255, 0.40);

  --surface-glass:         var(--mc-glass-bg);
  --surface-glass-hover:   var(--mc-glass-bg-hover);
  --signature-glow:        rgba(107, 124, 255, 0.30);

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


/* ════════════════════════════════════════════════════════
   A11Y — reduced motion default
   Applies a project-wide kill switch for every animation
   and transition. Components should ALSO read
   prefers-reduced-motion explicitly when they have JS-driven
   scroll/scrub behavior (frame sequences, cursor tracking).
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }
}