/* ============================================================
   GPK Services — Design Tokens
   Source: Charte Graphique GPK Services (assets/charte-graphique.pdf)
   ============================================================ */

/* ---- Brand fonts (local TTF) ---- */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Charte: 2 couleurs uniquement — un bleu et un gris foncé/noir */
  --gpk-blue:        #003595;   /* Pantone 661C — CMJN 100/81/20/4 — RVB 0/53/149 */
  --gpk-black:       #000000;   /* Pantone Black C */
  --gpk-dark:        #1a1a1a;   /* gris très foncé pour textes (alt au noir pur) */

  /* Niveaux de gris officiels (charte: noir 100% + gris 80%) */
  --gpk-gray-100:    #000000;
  --gpk-gray-80:     #333333;

  /* Échelle de gris étendue (dérivée pour UI — neutre, pas de teinte) */
  --gpk-gray-900:    #14161a;
  --gpk-gray-800:    #2a2d33;
  --gpk-gray-700:    #4a4e57;
  --gpk-gray-600:    #6b7079;
  --gpk-gray-500:    #8d929b;
  --gpk-gray-400:    #b3b7be;
  --gpk-gray-300:    #d4d7dc;
  --gpk-gray-200:    #e7e9ed;
  --gpk-gray-100-bg: #f3f4f6;
  --gpk-gray-50:     #f8f9fa;
  --gpk-white:       #ffffff;

  /* Bleu — variations dérivées du #003595 pour états UI */
  --gpk-blue-900:    #001a4d;
  --gpk-blue-800:    #00256e;
  --gpk-blue-700:    #003595;   /* base */
  --gpk-blue-600:    #1a4ba8;
  --gpk-blue-500:    #3a68bd;
  --gpk-blue-400:    #6b8ed1;
  --gpk-blue-300:    #9eb5e0;
  --gpk-blue-200:    #cdd9ee;
  --gpk-blue-100:    #e6ecf6;
  --gpk-blue-50:     #f3f6fc;

  /* ---------- SEMANTIC COLORS ---------- */
  /* Couleurs métier pour CRM/ERP (status, validation, alerte) — */
  /* dérivées harmoniquement, neutres pour ne pas concurrencer le bleu marque */
  --gpk-success:     #1f8a4d;
  --gpk-success-bg:  #e6f4ec;
  --gpk-warning:     #b8740a;
  --gpk-warning-bg:  #fbf1de;
  --gpk-danger:      #b3261e;
  --gpk-danger-bg:   #fbeae9;
  --gpk-info:        var(--gpk-blue-700);
  --gpk-info-bg:     var(--gpk-blue-100);

  /* ---------- ROLE TOKENS ---------- */
  --bg:              var(--gpk-white);
  --bg-elevated:     var(--gpk-white);
  --bg-subtle:       var(--gpk-gray-50);
  --bg-muted:        var(--gpk-gray-100-bg);
  --bg-inverse:      var(--gpk-gray-900);

  --fg:              var(--gpk-gray-900);
  --fg-1:            var(--gpk-gray-900);
  --fg-2:            var(--gpk-gray-700);
  --fg-3:            var(--gpk-gray-600);
  --fg-muted:        var(--gpk-gray-500);
  --fg-on-blue:      var(--gpk-white);
  --fg-on-dark:      var(--gpk-white);

  --border:          var(--gpk-gray-200);
  --border-strong:   var(--gpk-gray-300);
  --border-focus:    var(--gpk-blue-700);

  --accent:          var(--gpk-blue-700);
  --accent-hover:    var(--gpk-blue-800);
  --accent-active:   var(--gpk-blue-900);
  --accent-fg:       var(--gpk-white);

  /* ---------- TYPOGRAPHY ---------- */
  /* Charte web: Montserrat (titres) + Open Sans (corps) */
  /* Charte édition: Trebuchet MS (mails / docs internes) */
  --font-display:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:       "Open Sans", "Segoe UI", Tahoma, sans-serif;
  --font-edition:    "Trebuchet MS", "Lucida Sans", sans-serif;
  --font-mono:       ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Type scale — base 16px */
  --fs-xs:           0.75rem;    /* 12 */
  --fs-sm:           0.875rem;   /* 14 */
  --fs-base:         1rem;       /* 16 */
  --fs-md:           1.125rem;   /* 18 */
  --fs-lg:           1.25rem;    /* 20 */
  --fs-xl:           1.5rem;     /* 24 */
  --fs-2xl:          1.875rem;   /* 30 */
  --fs-3xl:          2.25rem;    /* 36 */
  --fs-4xl:          3rem;       /* 48 */
  --fs-5xl:          3.75rem;    /* 60 */

  --lh-tight:        1.15;
  --lh-snug:         1.3;
  --lh-normal:       1.5;
  --lh-relaxed:      1.65;

  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-extrabold:    800;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;     /* utilisé pour SERVICES dans le logo */

  /* ---------- SPACING (4px base) ---------- */
  --space-0:         0;
  --space-0-5:       2px;
  --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;

  /* ---------- RADIUS ---------- */
  /* Marque géométrique et industrielle — radius modérés, jamais ronds excessifs */
  --radius-none:     0;
  --radius-xs:       2px;
  --radius-sm:       4px;
  --radius-md:       6px;
  --radius-lg:       10px;
  --radius-xl:       14px;
  --radius-pill:     999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:       0 1px 2px rgba(20, 22, 26, 0.05);
  --shadow-sm:       0 1px 3px rgba(20, 22, 26, 0.08), 0 1px 2px rgba(20, 22, 26, 0.04);
  --shadow-md:       0 4px 12px rgba(20, 22, 26, 0.08), 0 2px 4px rgba(20, 22, 26, 0.04);
  --shadow-lg:       0 12px 28px rgba(20, 22, 26, 0.10), 0 4px 8px rgba(20, 22, 26, 0.05);
  --shadow-xl:       0 24px 48px rgba(20, 22, 26, 0.14);
  --shadow-focus:    0 0 0 3px rgba(0, 53, 149, 0.25);
  --shadow-inner:    inset 0 1px 2px rgba(20, 22, 26, 0.06);

  /* ---------- MOTION ---------- */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:        120ms;
  --dur-base:        180ms;
  --dur-slow:        280ms;

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

  /* Zone de protection logo (charte: 1.5x autour) */
  --logo-protection: 1.5;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-1); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h1, .h1 { font-size: var(--fs-4xl); font-weight: var(--fw-extrabold); }
h2, .h2 { font-size: var(--fs-3xl); }
h3, .h3 { font-size: var(--fs-2xl); }
h4, .h4 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h5, .h5 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
h6, .h6 { font-size: var(--fs-md); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

p { margin: 0; line-height: var(--lh-relaxed); color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--gpk-blue-700);
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }
small { font-size: var(--fs-sm); color: var(--fg-3); }

a {
  color: var(--gpk-blue-700);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--gpk-blue-800); text-decoration: underline; }

/* ============================================================
   FOCUS — accessible, marque
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--gpk-blue-700);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}