/**
 * Studio Koncordia — base layer
 * Reset-lite, paper texture, typography defaults
 * Requires: fonts.css + tokens.css linked before this file (no @import — avoids duplicate/cascade delay)
 */

/* ——— Reset lite ——— */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  /* Keep centered containers aligned when a page does not overflow (e.g. Services). */
  scrollbar-gutter: stable;
}

/* Écart volontaire au cahier des charges §15, demandé par le client :
   les animations doivent toujours se jouer, même si le système demande de les
   réduire. L'ancien bloc « prefers-reduced-motion » ramenait ici toutes les
   durées à 0.01ms avec !important, ce qui figeait le site entier. */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* ——— Paper grain (single fixed SVG tooth — stationery, not dirt) ——— */
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background-color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-nav-open {
  overflow: hidden;
}

/*
 * One tiled feTurbulence overlay (not dual body+pseudo).
 * Warm ink-tinted matrix → drafting vellum; multiply keeps paper hue.
 * Static — safe under prefers-reduced-motion; muted for contrast / forced-colors.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--texture-paper-opacity);
  background-color: transparent;
  /* Warm bronze-cream tooth only — no grey fiber wash */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.48 0 0 0 0 0.40 0 0 0 0 0.28 0 0 0 0.38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: var(--texture-paper-tile) var(--texture-paper-tile);
  background-repeat: repeat;
  mix-blend-mode: soft-light;
}

@media (prefers-contrast: more) {
  body::before {
    opacity: 0.025;
  }
}

@media (forced-colors: active) {
  body::before {
    content: none;
  }
}

body > * {
  position: relative;
  z-index: var(--z-base);
}

/* ——— Type defaults ——— */
h1,
h2,
h3,
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

h1,
.h-display {
  font-size: var(--text-display);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-nav);
}

.lead {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: var(--color-ink-soft);
}

.text-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--color-bronze);
}

.label,
.text-label {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-focus);
}

.text-mono,
.annotate {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

p + p {
  margin-top: var(--space-4);
}

/* ——— Layout helpers ——— */
.container {
  width: var(--container);
  margin-inline: auto;
}

.container--wide {
  width: var(--container-wide);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-section);
}

/*
 * Mission / ink band — marble stone, not muddy charcoal fill.
 * Cream-tinted feTurbulence (kin to paper tooth) + sparse veins + laid whisper.
 * Baked into background (mission-band owns ::before/::after hairlines).
 * Static — reduced-motion safe; muted / removed for contrast & forced-colors.
 */
.band-ink {
  --band-ink-marble: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.52' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.949 0 0 0 0 0.937 0 0 0 0 0.91 0 0 0 0.42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-color: var(--color-ink);
  background-image:
    /* Quiet rim — depth without haze */
    linear-gradient(
      180deg,
      rgba(242, 239, 232, 0.036) 0%,
      transparent 14%,
      transparent 86%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    radial-gradient(
      115% 75% at 10% 16%,
      rgba(242, 239, 232, 0.048) 0%,
      transparent 50%
    ),
    radial-gradient(
      85% 65% at 92% 84%,
      rgba(154, 128, 96, 0.055) 0%,
      transparent 46%
    ),
    /* Primary mineral vein */
    linear-gradient(
      122deg,
      transparent 0%,
      transparent 36%,
      rgba(242, 239, 232, 0.042) 47%,
      transparent 48.2%,
      transparent 64%,
      rgba(154, 128, 96, 0.038) 72%,
      transparent 73.4%
    ),
    /* Secondary vein whisper */
    linear-gradient(
      168deg,
      transparent 42%,
      rgba(242, 239, 232, 0.02) 55%,
      transparent 56.4%
    ),
    /* Laid direction — same angle language as paper fiber */
    repeating-linear-gradient(
      108deg,
      transparent 0,
      transparent 7px,
      rgba(242, 239, 232, 0.014) 7px,
      rgba(242, 239, 232, 0.014) 8px
    ),
    var(--band-ink-marble);
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    var(--texture-ink-tile) var(--texture-ink-tile);
  background-repeat: repeat;
  background-blend-mode:
    normal,
    normal,
    normal,
    normal,
    normal,
    normal,
    soft-light;
  color: var(--color-on-ink);
  position: relative;
  isolation: isolate;
}

@media (prefers-contrast: more) {
  .band-ink {
    background-image: linear-gradient(
      180deg,
      rgba(242, 239, 232, 0.028) 0%,
      transparent 12%,
      transparent 88%,
      rgba(0, 0, 0, 0.1) 100%
    );
    background-blend-mode: normal;
  }
}

@media (forced-colors: active) {
  .band-ink {
    background-image: none;
  }
}

.band-ink .lead,
.band-ink .text-accent {
  color: var(--color-bronze-bright);
}

.band-ink p {
  color: var(--color-on-ink-muted);
}

/* ——— CTA primitives (tokens; engineered states in components.css) ——— */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  min-height: var(--btn-min-height);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-none);
  border: 0;
  cursor: pointer;
  transition:
    background-color var(--duration-ui) var(--ease-out-precise),
    color var(--duration-ui) var(--ease-out-precise),
    transform var(--duration-micro) var(--ease-out-precise),
    box-shadow var(--duration-micro) var(--ease-out-precise);
}

.btn--primary {
  background-color: var(--color-ink);
  color: var(--color-on-ink);
}

.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--color-on-ink);
  box-shadow: inset 0 0 0 var(--hairline) var(--color-on-ink);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap-compact);
  min-height: 44px;
  padding-block: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-focus);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition:
    background-size var(--duration-ui) var(--ease-out-precise),
    color var(--duration-ui) var(--ease-out-precise);
}

/* ——— Construction hairline utility ——— */
.rule {
  border: 0;
  height: var(--hairline);
  background: var(--color-fog);
}

.rule--bronze {
  background: var(--color-bronze-line);
}