/* ==========================================================================
   Projet Serval — base.css
   Design tokens, reset, global element styles, shared keyframes and the
   hover / micro-interaction layer. Loaded on every page.
   ========================================================================== */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk.woff2') format('woff2');
}

:root {
  /* Surfaces */
  --bg: #14140d;
  --bg-home: #13150d;
  --bg-admin: #100f0a;
  --panel: #191811;
  --panel-2: #1c1c12;
  --panel-3: #100f0a;
  --olive: #3c4220;

  /* Ink */
  --ink: #e8e3d6;
  --ink-soft: #c6c1b2;
  --muted: #9a9684;
  --muted-2: #7c7558;
  --muted-3: #4a4632;
  --muted-4: #5e5840;

  /* Accent */
  --amber: #e8a317;
  --amber-bright: #ffc545;
  --amber-deep: #c98c14;

  /* Status */
  --danger: #c0392b;
  --ok: #3fa34d;

  /* Lines */
  --line: rgba(232, 227, 214, .1);
  --line-soft: rgba(232, 227, 214, .08);
  --line-faint: rgba(232, 227, 214, .06);
  --amber-line: rgba(232, 163, 23, .35);
  --amber-line-strong: rgba(232, 163, 23, .4);

  /* Type */
  --f-body: 'Inter', system-ui, sans-serif;
  --f-brand: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-display: 'Bebas Neue', 'Oswald', 'Inter', sans-serif;
  --f-stencil: 'Chakra Petch', 'Oswald', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  /* Layout */
  --maxw: 1320px;
  --gutter: clamp(18px, 4vw, 44px);
  --section-y: clamp(56px, 9vw, 116px);
  --header-h: 84px;
}

/* --- Reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.page-home { background: var(--bg-home); }
body.page-admin { background: var(--bg-admin); overflow-x: visible; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-weight: 600;
}
a { color: inherit; text-decoration: none; }
input, select, textarea { font-family: var(--f-body); }

::selection { background: var(--amber); color: #14140d; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0e0e08; }
::-webkit-scrollbar-thumb { background: #3a3a26; }

/* --- Keyframes --- */
@keyframes kb { 0% { transform: scale(1.03); } 100% { transform: scale(1.1); } }
@keyframes mfade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* --- Micro-interactions (hover) ---
   A single transition on every link/button makes the whole site feel smooth,
   then a few utility classes add tasteful, on-theme motion. */
a, button {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ti { vertical-align: -.125em; }
footer { background: #0e0e08; }
footer a:hover { color: var(--amber); }

/* Card lift + amber halo */
.dc-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.dc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 163, 23, .45);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .75);
}

/* Arrow nudge inside CTAs */
.dc-nudge .ti { transition: transform .2s ease; }
.dc-nudge:hover .ti-arrow-right { transform: translateX(4px); }
.dc-nudge:hover .ti-arrow-up-right { transform: translate(3px, -3px); }
.dc-nudge:hover .ti-arrow-left { transform: translateX(-4px); }