/* ============================================================
   01 — DESIGN TOKENS
   Perséides Festival Design System
   Viewport: 360px → 1320px
   ============================================================ */

:root {
  /* ==========================================================
     1. TYPOGRAPHY
     ========================================================== */
  --fs-xs:  0.8rem;                                         /* 12.8px fixe */
  --fs-sm:  0.9375rem;                                      /* 15px fixe */
  --fs-s:   1.0625rem;                                      /* 17px fixe */
  --fs-m:   clamp(1.25rem, 0.28vi + 1.19rem, 1.42rem);      /* 20→23px */
  --fs-l:   clamp(1.56rem, 0.54vi + 1.44rem, 1.89rem);      /* 25→30px */
  --fs-xl:  clamp(1.95rem, 0.94vi + 1.74rem, 2.52rem);      /* 31→40px */
  --fs-2xl: clamp(2.44rem, 1.52vi + 2.1rem, 3.35rem);       /* 39→54px */
  --fs-3xl: clamp(3.05rem, 2.37vi + 2.52rem, 4.47rem);      /* 49→72px */

  /* ==========================================================
     2. SPACING (Ratio ×2)
     ========================================================== */
  --spacing-3xs: 0.25rem;                                    /* 4px fixe */
  --spacing-2xs: clamp(0.25rem, 0.37vi + 0.17rem, 0.5rem);   /* 4→8px */
  --spacing-xs:  clamp(0.5rem, 0.74vi + 0.33rem, 1rem);      /* 8→16px */
  --spacing-s:   clamp(0.75rem, 1.11vi + 0.5rem, 1.5rem);    /* 12→24px */
  --spacing-m:   clamp(1rem, 1.48vi + 0.67rem, 2rem);        /* 16→32px */
  --spacing-l:   clamp(1.5rem, 2.22vi + 1rem, 3rem);         /* 24→48px */
  --spacing-xl:  clamp(2rem, 2.96vi + 1.33rem, 4rem);        /* 32→64px */
  --spacing-2xl: clamp(3rem, 4.44vi + 2rem, 6rem);           /* 48→96px */
  --spacing-3xl: clamp(4rem, 5.93vi + 2.67rem, 8rem);        /* 64→128px */

  /* ==========================================================
     3. SECTIONS
     ========================================================== */
  --section-3xs: var(--spacing-s);
  --section-2xs: var(--spacing-m);
  --section-xs:  var(--spacing-l);
  --section-s:   var(--spacing-xl);
  --section-m:   var(--spacing-2xl);
  --section-l:   var(--spacing-3xl);
  --section-xl:  clamp(5rem, 7.41vi + 3.33rem, 10rem);       /* 80→160px */
  --section-2xl: clamp(6rem, 8.89vi + 4rem, 12rem);          /* 96→192px */
  --section-padding-x: clamp(1.25rem, 6.522vi - 0.217rem, 5rem); /* 20→80px */

  /* ==========================================================
     4. BORDER RADIUS
     ========================================================== */
  --radius-3xl:  2.5rem;   /* 40px */
  --radius-2xl:  2rem;     /* 32px */
  --radius-xl:   1.5rem;   /* 24px */
  --radius-l:    1rem;     /* 16px */
  --radius-m:    0.75rem;  /* 12px */
  --radius-s:    0.5rem;   /* 8px */
  --radius-xs:   0.25rem;  /* 4px */
  --radius-full: 9999px;
  --radius-none: 0;

  /* ==========================================================
     5. COLORS — Primary (Teal)
     ========================================================== */
  --color-teal-900: #0B242B;
  --color-teal-800: #123844;
  --color-teal-700: #004F60;
  --color-teal-600: #326A7A;
  --color-teal-500: #4E91A2;
  --color-teal-400: #1A3840;
  --color-teal-300: #39535A;

  /* ==========================================================
     6. COLORS — Accent (Coral)
     ========================================================== */
  --color-coral-700: #A13E43;
  --color-coral-600: #CF545A;
  --color-coral-500: #E97A7F;

  /* ==========================================================
     7. COLORS — Secondary (Yellow)
     ========================================================== */
  --color-yellow-700: #E9B84B;
  --color-yellow-600: #F0C15C;
  --color-yellow-500: #F3CB75;
  --color-yellow-400: #F5D48D;

  /* ==========================================================
     8. COLORS — Tertiary (Orange)
     ========================================================== */
  --color-orange-600: #E07C3B;
  --color-orange-500: #F4A566;

  /* ==========================================================
     9. COLORS — Neutrals
     ========================================================== */
  --color-dark-900: #081B20;
  --color-dark-800: #0E2D36;
  --color-beige-100: #EFE7DD;
  --color-beige-50:  #F5EDE4;
  --color-beige-25:  #F8F1E8;
  --color-white:     #FFFFFF;
  --color-white-70:  #FFFFFFB3;
  --color-beige-transparent-50: #F8F1E880;
  --color-beige-transparent-90: #F8F1E8E6;

  /* ==========================================================
     10. SHADOWS
     ========================================================== */
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-l:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-m:  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-s:  0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-dark-xl: 0 20px 50px rgba(0,0,0,.5);
  --shadow-dark-l:  0 15px 35px rgba(0,0,0,.4);
  --shadow-dark-m:  0 10px 25px rgba(0,0,0,.3);

  /* ==========================================================
     11. CONTENT WIDTHS
     ========================================================== */
  --content-narrow: 45ch;
  --content-medium: 75ch;
  --content-wide:   90ch;

  /* ==========================================================
     12. ASPECT RATIOS
     ========================================================== */
  --ratio-square:     1;
  --ratio-landscape:  4/3;
  --ratio-portrait:   3/4;
  --ratio-widescreen: 16/9;
  --ratio-cinematic:  21/9;
  --ratio-ultrawide:  18/5;
  --ratio-golden:     1.618/1;
}