/* ============================================================
   KN CLEANING — Design Tokens
   Detailing automobile premium · Belgique
   Palette : bleu clair, bleu profond, blanc, noir, gris premium
   (Système dérivé de la structure premium Ecowave, recoloré en bleu)
   ============================================================ */

:root {
  /* ---------- BLEU — échelle de marque (issue du logo KN) ---------- */
  --blue-50:  #EFF5FD;
  --blue-100: #D9E9FB;
  --blue-200: #B4D2F6;
  --blue-300: #82B4EE;
  --blue-400: #4F92E4;
  --blue-500: #2E86E0;   /* bleu clair vif — accent logo "Cleaning" */
  --blue-600: #1A66D6;   /* primaire interactif (boutons, liens) */
  --blue-700: #14479A;
  --blue-800: #102F66;   /* bleu profond — titres, sections sombres */
  --blue-900: #0B1F45;   /* navy le plus foncé */
  --sky:      #7FC0F2;   /* éclaboussure claire — reflets/halos uniquement */
  --sky-soft: #BFE0F9;

  /* ---------- INK — noir premium (légèrement bleuté) ---------- */
  --ink-900: #0A0F1A;   /* presque noir — hero/footer sombres */
  --ink-800: #121826;
  --ink-700: #1B2433;
  --ink-600: #2C3848;
  --ink-500: #475264;
  --ink-400: #6B7688;   /* texte secondaire */
  --ink-300: #9AA3B2;
  --ink-200: #C7CDD8;

  /* ---------- NEUTRES — blanc & gris premium ---------- */
  --white:     #FFFFFF;
  --paper:     #FBFCFE;   /* fond de page, blanc frais */
  --mist:      #F2F5FA;   /* bande de section gris clair */
  --cloud:     #E9EEF6;   /* carte alt / inset */
  --line:      #E0E6F0;   /* bordures fines */
  --line-soft: #EDF1F7;

  /* ---------- ACCENT chaud rare (étoiles d'avis) ---------- */
  --gold-500: #E0A93B;
  --gold-100: #F7ECD3;

  /* ---------- SÉMANTIQUE ---------- */
  --success: #1E9E5A;
  --success-bg: #E3F5EC;
  --warning: #C28A22;
  --warning-bg: #F7EDD6;
  --danger:  #C2453C;
  --danger-bg: #F7E3E1;
  --info:    var(--blue-600);
  --info-bg: var(--blue-50);

  /* WhatsApp */
  --whatsapp: #25D366;
  --whatsapp-dark: #1FAE54;

  /* ---------- RÔLES SÉMANTIQUES ---------- */
  --bg:            var(--paper);
  --bg-elevated:   var(--white);
  --bg-sunken:     var(--mist);
  --bg-inverse:    var(--ink-900);

  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-400);
  --fg-subtle:     var(--ink-300);
  --fg-on-dark:    #EAF1FB;
  --fg-on-blue:    #EAF2FE;

  --brand:         var(--blue-600);
  --brand-strong:  var(--blue-800);
  --brand-hover:   var(--blue-500);
  --brand-bright:  var(--blue-500);
  --on-brand:      #FFFFFF;

  --border:        var(--line);
  --border-strong: var(--ink-200);
  --focus-ring:    color-mix(in oklch, var(--blue-500) 55%, transparent);

  /* ============================================================ TYPO */
  --font-display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  3.75rem;
  --text-5xl:  4.75rem;

  --leading-tight: 1.05;
  --leading-snug:  1.18;
  --leading-base:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.011em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-eyebrow: 0.16em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ============================================================ ESPACEMENT */
  --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;

  --container: 1200px;
  --container-wide: 1320px;
  --gutter: 24px;
  --section-y: 112px;

  /* ============================================================ RAYONS */
  --radius-xs: 6px;  --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ============================================================ OMBRES (douces, bleutées) */
  --shadow-xs: 0 1px 2px rgba(10, 15, 26, 0.05);
  --shadow-sm: 0 1px 3px rgba(10, 15, 26, 0.06), 0 1px 2px rgba(10, 15, 26, 0.04);
  --shadow-md: 0 6px 16px rgba(16, 47, 102, 0.08), 0 2px 5px rgba(10, 15, 26, 0.05);
  --shadow-lg: 0 16px 36px rgba(16, 47, 102, 0.12), 0 5px 12px rgba(10, 15, 26, 0.06);
  --shadow-xl: 0 30px 64px rgba(11, 31, 69, 0.18), 0 12px 26px rgba(10, 15, 26, 0.08);
  --shadow-brand: 0 16px 40px rgba(26, 102, 214, 0.32);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ============================================================ MOTION */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-slower: 680ms;
}