/* ============================================================
   INTELUXURY · Design Tokens
   Fondations du système. Ne jamais utiliser de valeur brute :
   toujours référencer un token.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COULEURS · Primitives
     ---------------------------------------------------------- */

  /* Encre : échelle neutre principale */
  --ix-ink-50:  #F6F6F6;
  --ix-ink-100: #E8E8E8;   /* lignes, séparateurs */
  --ix-ink-200: #D1D1D1;
  --ix-ink-300: #ABABAB;
  --ix-ink-400: #888888;   /* texte tertiaire */
  --ix-ink-500: #666666;   /* texte secondaire */
  --ix-ink-600: #444444;
  --ix-ink-700: #333333;
  --ix-ink-800: #1C1C1C;
  --ix-ink-900: #111111;   /* encre principale */
  --ix-ink-950: #000000;

  /* Brume : gris froid des panneaux */
  --ix-mist-50:  #FAFBFB;
  --ix-mist-100: #F3F5F6;  /* fond panneau (logo wall, etc.) */
  --ix-mist-200: #E6EAEC;

  /* Laiton : accent métal, usage homéopathique (< 5 %) */
  --ix-brass-100: #F2EEE4;
  --ix-brass-300: #CDBF9F;
  --ix-brass-400: #B5A47F; /* base */
  --ix-brass-500: #9A8862;
  --ix-brass-600: #7E6F4E;

  /* Blanc */
  --ix-white: #FFFFFF;
  --ix-white-80: rgba(255, 255, 255, 0.80);
  --ix-white-55: rgba(255, 255, 255, 0.55);
  --ix-white-15: rgba(255, 255, 255, 0.15);

  /* Voiles */
  --ix-overlay-hero: rgba(0, 0, 0, 0.40);
  --ix-overlay-deep: rgba(0, 0, 0, 0.60);

  /* Sémantiques : désaturées, jamais criardes */
  --ix-success: #2F6B4F;
  --ix-error:   #9C3B2E;
  --ix-warning: #B07C2A;
  --ix-info:    #2E5A9C;

  /* ----------------------------------------------------------
     COULEURS · Rôles
     ---------------------------------------------------------- */
  --color-bg:             var(--ix-white);
  --color-bg-panel:       var(--ix-mist-100);
  --color-bg-inverse:     var(--ix-ink-900);
  --color-text:           var(--ix-ink-900);
  --color-text-secondary: var(--ix-ink-600);
  --color-text-tertiary:  var(--ix-ink-500);
  --color-text-inverse:   var(--ix-white);
  --color-line:           var(--ix-ink-100);
  --color-line-inverse:   var(--ix-white-15);
  --color-accent:         var(--ix-brass-400);

  /* ----------------------------------------------------------
     TYPOGRAPHIE · Familles
     Zodiak       → display serif (origine : Zodiak)
     General Sans → grotesque UI (substitut de Neue Montreal)
     DM Mono      → labels techniques
     ---------------------------------------------------------- */
  --font-display: 'Zodiak', 'Times New Roman', Georgia, serif;
  --font-sans: 'General Sans', 'Neue Montreal', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', Menlo, monospace;

  /* Échelle fluide */
  --text-display-2xl: clamp(2.75rem, 7.5vw, 7.25rem);  /* H1 héro */
  --text-display-xl:  clamp(2.25rem, 5vw, 4.5rem);     /* H2 section */
  --text-display-lg:  clamp(1.875rem, 3.4vw, 3rem);    /* H3 */
  --text-display-md:  clamp(1.5rem, 2.4vw, 2rem);      /* H4 */
  --text-display-sm:  1.375rem;                        /* H5 */
  --text-body-xl:     clamp(1.25rem, 1.8vw, 1.625rem); /* manifeste */
  --text-body-lg:     1.25rem;
  --text-body:        1.0625rem;
  --text-body-sm:     0.9375rem;
  --text-caption:     0.8125rem;

  /* Graisses : la légèreté est la règle */
  --weight-thin:    100;
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* Interlignages */
  --leading-display: 1.05;
  --leading-tight:   1.2;
  --leading-body:    1.6;

  /* Approches */
  --tracking-display: -0.01em;
  --tracking-body:    0;
  --tracking-mono:    0.125em;   /* 2px @ 16px */

  /* ----------------------------------------------------------
     ESPACEMENTS · échelle de 4
     ---------------------------------------------------------- */
  --space-1:  0.25rem;   /*   4 */
  --space-2:  0.5rem;    /*   8 */
  --space-3:  0.75rem;   /*  12 */
  --space-4:  1rem;      /*  16 */
  --space-6:  1.5rem;    /*  24 */
  --space-8:  2rem;      /*  32 */
  --space-12: 3rem;      /*  48 */
  --space-16: 4rem;      /*  64 */
  --space-24: 6rem;      /*  96 */
  --space-32: 8rem;      /* 128 */
  --space-48: 12rem;     /* 192 */

  /* Rythme vertical des sections */
  --section-gap: clamp(5rem, 11vw, 10rem);

  /* ----------------------------------------------------------
     GRILLE
     ---------------------------------------------------------- */
  --container: 1440px;
  --container-wide: 1760px;
  --container-narrow: 880px;
  --gutter: clamp(1rem, 2vw, 1.5rem);
  --margin: clamp(1.25rem, 4vw, 5rem);

  /* ----------------------------------------------------------
     RAYONS
     ---------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;     /* images, cartes */
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 100px;   /* boutons */

  /* ----------------------------------------------------------
     OMBRES · quasi inexistantes : le luxe est plat
     ---------------------------------------------------------- */
  --shadow-card:  0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-hover: 0 12px 40px -12px rgba(17, 17, 17, 0.18);
  --shadow-modal: 0 24px 80px -16px rgba(17, 17, 17, 0.28);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   0.3s;
  --duration-base:   0.6s;
  --duration-slow:   0.9s;
  --duration-reveal: 1.1s;

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}