/*
 * Niort Tech — design system — v0.1.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:                     #f9f4f0;
  --color-brand-100:                    #f7ebe2;
  --color-brand-200:                    #f4c9a8;
  --color-brand-300:                    #eca379;
  --color-brand-400:                    #e77332;
  --color-brand-500:                    #bc5216;
  --color-brand-600:                    #a9490f;
  --color-brand-700:                    #8e3d0f;
  --color-brand-800:                    #5b2b10;
  --color-brand-900:                    #3e200e;
  --color-patio-50:                     #f4f6f4;
  --color-patio-100:                    #e6efe7;
  --color-patio-200:                    #c8dacc;
  --color-patio-300:                    #a2c3aa;
  --color-patio-400:                    #72a67f;
  --color-patio-500:                    #4e7c59;
  --color-patio-600:                    #3c6146;
  --color-patio-700:                    #36543d;
  --color-patio-800:                    #2b4030;
  --color-patio-900:                    #1f2d23;
  --color-neutral-0:                    #ffffff;
  --color-neutral-50:                   #fbf7f3;
  --color-neutral-75:                   #f4f1e4;
  --color-neutral-100:                  #f4f0ec;
  --color-neutral-200:                  #e6e0da;
  --color-neutral-300:                  #cfc6bd;
  --color-neutral-400:                  #8d8074;
  --color-neutral-500:                  #7a6e64;
  --color-neutral-600:                  #5b5049;
  --color-neutral-700:                  #463d37;
  --color-neutral-800:                  #332b26;
  --color-neutral-900:                  #241a14;
  --color-neutral-1000:                 #150f0b;
  --color-text-strong:                  #241a14;
  --color-text-base:                    #463d37;
  --color-text-muted:                   #5b5049;
  --color-text-inverse:                 #ffffff;
  --color-text-brand:                   #8e3d0f;
  --color-text-patio:                   #3c6146;
  --color-text-link:                    #8e3d0f;
  --color-text-link-hover:              #5b2b10;
  --color-surface-page:                 #f4f1e4;
  --color-surface-raised:               #ffffff;
  --color-surface-sunken:               #fbf7f3;
  --color-surface-inverse:              #241a14;
  --color-surface-brand:                #bc5216;
  --color-surface-brand-tint:           #f7ebe2;
  --color-surface-patio:                #4e7c59;
  --color-surface-patio-tint:           #e6efe7;
  --color-surface-overlay:              rgba(14, 22, 14, 0.70);
  --color-surface-cream:                #f4f1e4;
  --color-surface-white:                #ffffff;
  --color-border-subtle:                #e6e0da;
  --color-border-base:                  #8d8074;
  --color-border-strong:                #7a6e64;
  --color-border-brand:                 #bc5216;
  --color-border-patio:                 #4e7c59;
  --color-border-focus:                 #8e3d0f;
  --color-offres-accent:                #bc5216;
  --color-offres-accent-text:           #8e3d0f;
  --color-offres-accent-hover:          #8e3d0f;
  --color-offres-surface:               #f7ebe2;
  --color-offres-border:                #f4c9a8;
  --color-offres-on-accent:             #ffffff;
  --color-accompagnement-accent:        #4e7c59;
  --color-accompagnement-accent-text:   #3c6146;
  --color-accompagnement-accent-hover:  #3c6146;
  --color-accompagnement-surface:       #e6efe7;
  --color-accompagnement-border:        #c8dacc;
  --color-accompagnement-on-accent:     #ffffff;
  --color-feedback-success:             #117d57;
  --color-feedback-success-soft:        #e4f6ee;
  --color-feedback-warning:             #996100;
  --color-feedback-warning-soft:        #fdf1dc;
  --color-feedback-danger:              #b3261e;
  --color-feedback-danger-soft:         #fbe7e7;
  --color-feedback-info:                #8e3d0f;
  --color-feedback-info-soft:           #f9f4f0;
  --color-partner-agglo:                #009fe3;

  /* font */
  --font-family-sans:                   'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-display:                'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono:                   ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  --font-weight-regular:                400;
  --font-weight-medium:                 500;
  --font-weight-semibold:               600;
  --font-weight-bold:                   700;
  --font-weight-extrabold:              800;
  --font-size-2xs:                      0.75rem;
  --font-size-xs:                       0.8125rem;
  --font-size-s:                        0.9375rem;
  --font-size-m:                        1rem;
  --font-size-l:                        1.125rem;
  --font-size-xl:                       clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --font-size-2xl:                      clamp(1.5rem, 2.2vw, 1.95rem);
  --font-size-3xl:                      clamp(1.9rem, 3.2vw, 2.5rem);
  --font-size-4xl:                      clamp(1.95rem, 3.4vw, 2.7rem);
  --font-size-5xl:                      clamp(2.6rem, 6.4vw, 5.4rem);
  --font-size-lead:                     clamp(1.02rem, 1.5vw, 1.24rem);
  --font-size-stat:                     clamp(2rem, 3.4vw, 3rem);
  --font-line-height-tight:             1.05;
  --font-line-height-snug:              1.2;
  --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.08em;
  --font-letter-spacing-eyebrow:        0.16em;

  /* space */
  --space-3xs:                          0.25rem;
  --space-2xs:                          0.5rem;
  --space-xs:                           0.75rem;
  --space-s:                            1rem;
  --space-m:                            1.5rem;
  --space-l:                            2rem;
  --space-xl:                           3rem;
  --space-2xl:                          4rem;
  --space-3xl:                          6rem;
  --space-4xl:                          8rem;
  --space-section:                      clamp(3.25rem, 7vw, 5.5rem);
  --space-gutter:                       clamp(1.25rem, 4vw, 1.75rem);

  /* size */
  --size-container:                     1360px;
  --size-container-narrow:              760px;
  --size-container-wide:                1440px;
  --size-measure:                       68ch;
  --size-touch-target:                  44px;
  --size-header-height:                 80px;
  --size-logo-height:                   48px;

  /* radius */
  --radius-none:                        0;
  --radius-s:                           6px;
  --radius-m:                           10px;
  --radius-l:                           16px;
  --radius-xl:                          26px;
  --radius-full:                        999px;

  /* shadow */
  --shadow-xs:                          0 1px 2px rgba(36, 26, 20, 0.06);
  --shadow-s:                           0 2px 8px rgba(36, 26, 20, 0.08);
  --shadow-m:                           0 8px 24px rgba(36, 26, 20, 0.10);
  --shadow-l:                           0 16px 48px rgba(36, 26, 20, 0.14);
  --shadow-focus:                       0 0 0 3px rgba(188, 82, 22, 0.32);
  --shadow-hero:                        0 30px 80px -30px rgba(36, 26, 20, 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, 1, 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:                  480px;
  --breakpoint-tablet:                  660px;
  --breakpoint-laptop:                  1000px;
  --breakpoint-desktop:                 1280px;
}