/* ============================================================
   Portfolio NBL — Design tokens
   Studio éditorial nocturne · noir + cuivre sombre
   ============================================================ */

:root {
  /* ---------- Couleurs · Encre & os ---------- */
  --c-ink:           #0B0B0D;
  --c-ink-raised:   #131316;
  --c-ink-sunken:   #07070A;
  --c-bone:         #F4F1EB;
  --c-bone-muted:   #A8A39A;
  --c-bone-dim:     #6B6760;
  --c-line:         #1E1E22;
  --c-line-strong:  #2C2C32;
  --c-line-soft:    rgba(244, 241, 235, 0.06);

  /* ---------- Couleurs · Accent cuivre ---------- */
  --c-copper:        #B87333;
  --c-copper-bright: #D89865;
  --c-copper-deep:   #6E4220;
  --c-copper-glow:   rgba(184, 115, 51, 0.14);
  --c-copper-soft:   rgba(184, 115, 51, 0.30);
  --c-copper-faint:  rgba(184, 115, 51, 0.04);

  /* ---------- États sémantiques ---------- */
  --c-success: #7C8B7A;
  --c-warn:    #C58A6A;
  --c-error:   #9B4A3A;

  /* ---------- Typographies ---------- */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* ---------- Tailles fluides (clamp) — desktop tendu ---------- */
  --t-d1: clamp(3.5rem,  10vw, 9rem);     /* hero */
  --t-d2: clamp(2.5rem,  7vw,  6rem);     /* h1 page */
  --t-d3: clamp(2rem,    4.5vw,4rem);     /* sous-titres, témoignages */
  --t-d4: clamp(1.5rem,  3vw,  2.5rem);   /* cartes large */
  --t-d5: clamp(1.25rem, 2.2vw,1.75rem);  /* labels grands */

  --t-lg: 1.25rem;     /* 20px */
  --t-md: 1.0625rem;   /* 17px */
  --t-sm: 0.9375rem;   /* 15px */
  --t-xs: 0.8125rem;   /* 13px */

  --t-mono-md: 0.8125rem;
  --t-mono-sm: 0.6875rem;

  --t-btn:     0.9375rem;
  --t-nav:     0.875rem;
  --t-eyebrow: 0.6875rem;

  /* ---------- Line-heights ---------- */
  --lh-tight:   0.92;
  --lh-snug:    1.05;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- Letter-spacing ---------- */
  --ls-tight:   -0.025em;
  --ls-snug:    -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.12em;
  --ls-widest:  0.16em;

  /* ---------- Espacements ---------- */
  --s-0:  0;
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-11: 10rem;
  --s-12: 12rem;

  /* ---------- Marges externes & grille ---------- */
  --gutter-x:    clamp(1.25rem, 7vw, 9rem);
  --container-max: 1440px;
  --reading-max:   62ch;
  --grid-gap: 1.5rem;
  --grid-gap-sm: 1rem;

  /* ---------- Radius ---------- */
  --r-0: 0;
  --r-1: 0.25rem;
  --r-2: 0.5rem;
  --r-3: 0.75rem;
  --r-4: 1rem;
  --r-5: 1.5rem;
  --r-pill:   999px;
  --r-circle: 50%;

  /* ---------- Ombres ---------- */
  --sh-0:           none;
  --sh-card:        inset 0 0 0 1px var(--c-line);
  --sh-card-hover:  inset 0 0 0 1px var(--c-line-strong);
  --sh-cta:         0 12px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--c-line-strong);
  --sh-cta-hover:   0 16px 56px rgba(184, 115, 51, 0.18), inset 0 0 0 1px var(--c-copper-soft);
  --sh-glow:        0 0 120px var(--c-copper-glow);
  --sh-glow-strong: 0 0 200px rgba(184, 115, 51, 0.22);
  --sh-focus:       0 0 0 2px var(--c-ink), 0 0 0 4px var(--c-copper);

  /* ---------- Easings (cubic-bezier premium) ---------- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back:  cubic-bezier(0.34, 1.45, 0.64, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear:    linear;

  /* ---------- Durées ---------- */
  --d-1: 150ms;
  --d-2: 250ms;
  --d-3: 450ms;
  --d-4: 700ms;
  --d-5: 1000ms;
  --d-marquee: 50s;

  /* ---------- Z-index ---------- */
  --z-base:    1;
  --z-content: 10;
  --z-nav:     100;
  --z-cta:     200;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-cursor:  9999;

  /* ---------- Breakpoints (référence) ---------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ============================================================
   Mode inversé (easter egg)
   ============================================================ */
html.inverted {
  --c-ink:         #F4F1EB;
  --c-ink-raised:  #E8E4DD;
  --c-ink-sunken:  #DDD8CF;
  --c-bone:        #0B0B0D;
  --c-bone-muted:  #4A4742;
  --c-bone-dim:    #6B6760;
  --c-line:        #D0CCC2;
  --c-line-strong: #B8B3A8;
}

/* ============================================================
   Mobile · ajustements tokens
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --grid-gap: var(--grid-gap-sm);
    --s-10: 5rem;
    --s-11: 6rem;
    --s-12: 7rem;
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-1: 0ms; --d-2: 0ms; --d-3: 0ms;
    --d-4: 0ms; --d-5: 0ms; --d-marquee: 0s;
  }
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-ink);
  color: var(--c-bone);
  font-family: var(--f-sans);
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  font-feature-settings: "ss01", "cv11";
  font-variation-settings: "opsz" 17;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Fraunces — ligatures éditoriales + tailles optiques */
h1, h2, h3, .t-display {
  font-feature-settings: "ss01", "ss03", "dlig";
  font-variation-settings: "opsz" 144;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection {
  background: var(--c-copper-soft);
  color: var(--c-bone);
}

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-1);
}

/* Scrollbar discrète */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--c-ink); }
  ::-webkit-scrollbar-thumb {
    background: var(--c-line-strong);
    border: 3px solid var(--c-ink);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--c-copper-deep); }
}

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