/* ==========================================================================
   RAQIYA MOBILITÉ — DESIGN TOKENS (SITE PUBLIC)
   Version 1.0 — Editorial moderne + Caribbean (palette dérivée du logo)
   ========================================================================== */

:root {
  /* ── PRIMITIVES ────────────────────────────────────────────────────────── */

  /* Neutres (canevas) */
  --ivoire-50:  #FDFBF6;
  --ivoire-100: #FAF7F2;   /* background principal */
  --ivoire-200: #F5EFE4;
  --sable-200:  #F0E8D9;   /* surfaces secondaires */
  --sable-300:  #EADFC8;   /* bordures subtiles */
  --sable-400:  #D4C5A3;

  /* Violet (couleur signature — dérivée du logo) */
  --violet-50:  #F5F0F9;
  --violet-100: #E6D9F0;
  --violet-200: #C5A7D9;
  --violet-400: #8656AD;
  --violet-500: #5C2D7E;   /* violet Raqiya canonique */
  --violet-600: #421F5A;   /* hover */
  --violet-700: #2A1538;   /* encre texte principal */
  --violet-800: #1A0D24;

  /* Safran (énergie, accents chaleureux) */
  --safran-100: #FEF3D6;
  --safran-300: #F9D26E;
  --safran-500: #F5B118;   /* safran Raqiya canonique */
  --safran-600: #D9970B;   /* hover */
  --safran-700: #A67108;

  /* Menthe (frais, success, respiration) */
  --menthe-100: #D8F0EA;
  --menthe-300: #90D4C4;
  --menthe-500: #5FC1B0;   /* menthe Raqiya canonique */
  --menthe-600: #3E9D8D;   /* hover */
  --menthe-700: #2C7268;

  /* Fonctionnels */
  --terracotta-500: #B84D2E;   /* error uniquement */
  --blanc:          #FFFFFF;

  /* ── SÉMANTIQUES ───────────────────────────────────────────────────────── */

  /* Surfaces */
  --color-surface-page:      var(--ivoire-100);
  --color-surface-default:   var(--blanc);
  --color-surface-raised:    var(--ivoire-50);
  --color-surface-sunken:    var(--sable-200);
  --color-surface-inverse:   var(--violet-700);
  --color-surface-overlay:   rgba(42, 21, 56, 0.72);

  /* Textes */
  --color-text-primary:      var(--violet-700);
  --color-text-secondary:    var(--violet-400);
  --color-text-tertiary:     var(--sable-400);
  --color-text-inverse:      var(--ivoire-100);
  --color-text-brand:        var(--violet-500);
  --color-text-on-brand:     var(--blanc);

  /* Bordures */
  --color-border-subtle:     var(--sable-300);
  --color-border-default:    var(--sable-400);
  --color-border-strong:     var(--violet-400);
  --color-border-focus:      var(--safran-500);

  /* Actions — brand primary = violet */
  --color-brand:             var(--violet-500);
  --color-brand-hover:       var(--violet-600);
  --color-brand-active:      var(--violet-700);
  --color-brand-fg:          var(--blanc);

  /* Actions — brand accent = safran (CTA secondaires chauds) */
  --color-accent:            var(--safran-500);
  --color-accent-hover:      var(--safran-600);
  --color-accent-fg:         var(--violet-700);

  /* États */
  --color-success:           var(--menthe-600);
  --color-success-bg:        var(--menthe-100);
  --color-warning:           var(--safran-500);
  --color-error:             var(--terracotta-500);
  --color-info:              var(--menthe-500);

  /* ── SPACING (base 4px) ────────────────────────────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* Section spacing fluide */
  --section-py: clamp(5rem, 8vw, 10rem);      /* 80→160px */
  --section-gap: clamp(3rem, 5vw, 6rem);      /* 48→96px  */

  /* ── TYPOGRAPHIE ───────────────────────────────────────────────────────── */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale — fluid clamp() pour responsive auto */
  --text-xs:    clamp(0.75rem, 0.7vw + 0.6rem, 0.8125rem);     /* 12→13 */
  --text-sm:    clamp(0.875rem, 0.75vw + 0.7rem, 0.9375rem);   /* 14→15 */
  --text-base:  clamp(1rem, 0.8vw + 0.85rem, 1.0625rem);       /* 16→17 */
  --text-lg:    clamp(1.125rem, 1vw + 0.9rem, 1.25rem);        /* 18→20 */
  --text-xl:    clamp(1.25rem, 1.5vw + 0.9rem, 1.5rem);        /* 20→24 */
  --text-2xl:   clamp(1.5rem, 2vw + 1rem, 2rem);               /* 24→32 */
  --text-3xl:   clamp(1.875rem, 2.5vw + 1.2rem, 2.5rem);       /* 30→40 */
  --text-4xl:   clamp(2.25rem, 3.5vw + 1.4rem, 3.5rem);        /* 36→56 */
  --text-5xl:   clamp(2.75rem, 5vw + 1.5rem, 4.5rem);          /* 44→72 */
  --text-6xl:   clamp(3.5rem, 7vw + 1.5rem, 6rem);             /* 56→96 */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-widest:   0.12em;

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ── RADIUS ─────────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── SHADOW ─────────────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(42, 21, 56, 0.04);
  --shadow-sm:  0 2px 4px rgba(42, 21, 56, 0.05), 0 1px 2px rgba(42, 21, 56, 0.04);
  --shadow-md:  0 4px 8px rgba(42, 21, 56, 0.06), 0 2px 4px rgba(42, 21, 56, 0.04);
  --shadow-lg:  0 12px 24px rgba(42, 21, 56, 0.08), 0 4px 8px rgba(42, 21, 56, 0.04);
  --shadow-xl:  0 24px 48px rgba(42, 21, 56, 0.12), 0 8px 16px rgba(42, 21, 56, 0.06);
  --shadow-2xl: 0 40px 80px rgba(42, 21, 56, 0.16);

  /* Teinte safran pour cards importantes */
  --shadow-warm: 0 12px 24px rgba(245, 177, 24, 0.15), 0 2px 4px rgba(42, 21, 56, 0.04);

  /* ── Z-INDEX ────────────────────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* ── MOTION ─────────────────────────────────────────────────────────────── */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sharp:   cubic-bezier(0.4, 0, 0.6, 1);

  /* ── LAYOUT ─────────────────────────────────────────────────────────────── */
  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --container-padding: clamp(1.25rem, 5vw, 7.5rem);  /* 20→120px */
}

/* ==========================================================================
   BASE RESET + TYPO GLOBALE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  font-feature-settings: "ss01", "ss02", "cv01";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
  margin: 0;
  /* Fraunces variable — optical size + soft */
  font-variation-settings: "opsz" 72, "SOFT" 50;
}

h1 { font-size: var(--text-6xl); font-weight: var(--weight-black); letter-spacing: var(--tracking-tightest); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0; max-width: 65ch; }

a {
  color: var(--color-text-brand);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

a:hover { color: var(--color-brand-hover); }

img, svg, video { display: block; max-width: 100%; height: auto; }

button { font-family: inherit; cursor: pointer; }

::selection {
  background: var(--safran-300);
  color: var(--violet-700);
}

/* ==========================================================================
   UTILITIES — signature editorial
   ========================================================================== */

/* Italic fraunces pour mots-clés (signature visuelle) */
.u-italic-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-variation-settings: "opsz" 72, "SOFT" 100;
}

/* Eyebrow — small caps letter-spaced au-dessus des titres */
.u-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-brand);
}

/* Filet horizontal sous les h2 (signature éditoriale) */
.u-rule::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--safran-500);
  margin-bottom: var(--space-6);
}

/* Container principal */
.u-container {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Screen-reader only */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   ACCESSIBILITÉ — motion reduced
   ========================================================================== */

@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;
  }
}