/*
 * Beely Studio — design system — v2.0.0
 *
 * FICHIER GÉNÉRÉ — ne pas modifier à la main.
 * Source : design-system/tokens.json
 * Régénérer : node bin/build-tokens.mjs <racine-du-site>
 */

:root {
  /* color */
  --color-brand-50:               #ebf1ff;
  --color-brand-100:              #d6e4ff;
  --color-brand-200:              #b3ccff;
  --color-brand-300:              #85b0ff;
  --color-brand-400:              #6ea0ff;
  --color-brand-500:              #1e69fe;
  --color-brand-600:              #0c52df;
  --color-brand-700:              #1a56d6;
  --color-brand-800:              #0b3589;
  --color-brand-900:              #0b2965;
  --color-neutral-0:              #ffffff;
  --color-neutral-50:             #f7f8fa;
  --color-neutral-100:            #f1f4fa;
  --color-neutral-200:            #e4e8f0;
  --color-neutral-300:            #c8cfdb;
  --color-neutral-400:            #8b95a6;
  --color-neutral-500:            #646d7c;
  --color-neutral-600:            #3f4757;
  --color-neutral-700:            #232c3b;
  --color-neutral-800:            #1a2130;
  --color-neutral-900:            #111827;
  --color-neutral-1000:           #0b0f18;
  --color-accent-soft:            #ffe3e9;
  --color-accent-base:            #ff2d55;
  --color-accent-strong:          #d81f42;
  --color-feedback-success:       #0d7a4a;
  --color-feedback-success-soft:  #e8f4ef;
  --color-feedback-warning:       #925d07;
  --color-feedback-warning-soft:  #f8f1e7;
  --color-feedback-danger:        #cf2340;
  --color-feedback-danger-soft:   #fbeeef;
  --color-feedback-info:          #1a56d6;
  --color-feedback-info-soft:     #eff5ff;
  --color-surface-page:           #ffffff;
  --color-surface-raised:         #ffffff;
  --color-surface-sunken:         #f1f4fa;
  --color-surface-inverse:        #111827;
  --color-surface-overlay:        rgba(20, 24, 31, 0.48);
  --color-text-strong:            #14181f;
  --color-text-base:              #3a3d43;
  --color-text-muted:             #65686e;
  --color-text-inverse:           #ffffff;
  --color-text-link:              #1a56d6;
  --color-text-link-hover:        #0c52df;
  --color-border-subtle:          #ecedee;
  --color-border-base:            #767b85;
  --color-border-strong:          #5b6069;
  --color-border-focus:           #1e69fe;
  --color-decor-badge:            #112040;
  --color-decor-on-primary:       #ffffff;
  --color-decor-grid-line:        rgba(20, 24, 31, 0.045);
  --color-decor-bloom:            rgba(47, 107, 255, 0.08);
  --color-decor-orb:              rgba(30, 105, 254, 0.04);
  --color-decor-glow-opacity:     0.26;
  --color-decor-logo-filter:      invert(1);
  --color-decor-menu-bg:          rgba(255, 255, 255, 0.98);

  /* font */
  --font-family-sans:             'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-display:          'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono:             ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --font-weight-regular:          400;
  --font-weight-medium:           500;
  --font-weight-semibold:         600;
  --font-weight-bold:             700;
  --font-size-2xs:                0.65rem;
  --font-size-xs:                 0.78rem;
  --font-size-s:                  0.9375rem;
  --font-size-m:                  1.125rem;
  --font-size-l:                  1.3125rem;
  --font-size-xl:                 1.625rem;
  --font-size-2xl:                2rem;
  --font-size-3xl:                clamp(1.3rem, 1.12rem + 0.6vw, 1.5rem);
  --font-size-4xl:                clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  --font-size-5xl:                clamp(2rem, 1.35rem + 2.8vw, 2.75rem);
  --font-line-height-tight:       1.2;
  --font-line-height-snug:        1.35;
  --font-line-height-base:        1.55;
  --font-line-height-relaxed:     1.75;
  --font-letter-spacing-tight:    -0.02em;
  --font-letter-spacing-base:     0;
  --font-letter-spacing-wide:     0.04em;

  /* space */
  --space-3xs:                    4px;
  --space-2xs:                    8px;
  --space-xs:                     12px;
  --space-s:                      16px;
  --space-m:                      24px;
  --space-l:                      32px;
  --space-xl:                     48px;
  --space-2xl:                    64px;
  --space-3xl:                    64px;
  --space-4xl:                    120px;
  --space-section:                clamp(56px, 5vw, 80px);
  --space-gutter:                 clamp(16px, 4vw, 34px);

  /* size */
  --size-container:               1366px;
  --size-container-narrow:        540px;
  --size-container-wide:          1080px;
  --size-measure:                 810px;
  --size-touch-target:            44px;
  --size-control:                 34px;

  /* radius */
  --radius-none:                  0;
  --radius-2xs:                   3.82px;
  --radius-xs:                    6.18px;
  --radius-s:                     8px;
  --radius-m:                     12px;
  --radius-l:                     20px;
  --radius-xl:                    42.36px;
  --radius-full:                  99999px;

  /* shadow */
  --shadow-xs:                    0 1px 2px rgba(20, 24, 31, 0.05);
  --shadow-s:                     0 2px 8px rgba(20, 24, 31, 0.07);
  --shadow-m:                     0 8px 24px rgba(20, 24, 31, 0.09);
  --shadow-l:                     0 24px 50px rgba(20, 24, 31, 0.12);
  --shadow-focus:                 0 0 0 3px rgba(30, 105, 254, 0.35);

  /* motion */
  --motion-duration-instant:      80ms;
  --motion-duration-fast:         160ms;
  --motion-duration-base:         240ms;
  --motion-duration-slow:         420ms;
  --motion-easing-standard:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-easing-enter:          cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-exit:           cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);

  /* layer */
  --layer-base:                   1;
  --layer-dropdown:               100;
  --layer-sticky:                 200;
  --layer-overlay:                300;
  --layer-modal:                  400;
  --layer-toast:                  500;

  /* breakpoint */
  --breakpoint-mobile:            640px;
  --breakpoint-tablet:            760px;
  --breakpoint-laptop:            900px;
  --breakpoint-desktop:           1024px;
  --breakpoint-wide:              1100px;
}