/**
 * Studio Koncordia — design tokens
 * Source: project/_agent/DESIGN_SYSTEM.md
 * Engineered paper + charcoal + bronze (no purple SaaS palette)
 */

:root {
  /* ——— Color ——— */
  --color-paper: #ece8e0;
  --color-paper-raised: #f4f1ea;
  --color-paper-recessed: #e0dbd1;
  /* Home well — a step deeper than recessed, still warm paper not grey */
  --color-paper-well: #c9c1b3;
  --color-ink: #141412;
  --color-ink-soft: #2a2926;
  --color-ink-muted: #5e5b54;
  /* Bronze darkened for AA body text on paper (~4.6:1); bright reserved for on-ink accents */
  --color-bronze: #7a6448;
  --color-bronze-bright: #9a8060;
  --color-bronze-line: rgba(122, 100, 72, 0.45);
  --color-bronze-faint: rgba(122, 100, 72, 0.18);
  --color-fog: rgba(20, 20, 18, 0.06);
  --color-on-ink: #f2efe8;
  --color-on-ink-muted: rgba(242, 239, 232, 0.78);
  /* Focus rings: engineered bronze on paper; bright bronze on ink surfaces */
  --color-focus: #5c4a33;
  --color-focus-on-ink: #c4a882;
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* Fine warm stationery tooth — keep light; avoid grey wash on large fields */
  --texture-paper-opacity: 0.035;
  --texture-paper-tile: 280px;
  /* Charcoal marble — cream-tinted tooth + veins; soft-light strength ≈ this */
  --texture-ink-opacity: 0.08;
  --texture-ink-tile: 256px;

  /* ——— Typography (self-hosted woff2 via fonts.css) ——— */
  --font-display: "Syne", "Helvetica Neue", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --font-accent: "IBM Plex Serif", "Georgia", serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  --text-display: clamp(2.5rem, 5vw, 4rem);
  /* Home H1 — sized to the copy measure so 1024+ never orphans « pour » / « et PME ».
     2.45vw keeps « pour indépendants et PME » on one line from 1024 upward. */
  --text-hero: clamp(1.625rem, min(0.55rem + 2.45vw, 6.6vh), 3.5rem);
  /* Section titles — deliberately below hero H1 (home-hook no longer overrides up) */
  --text-h2: clamp(1.375rem, 2.15vw, 1.875rem);
  --text-h3: 1.25rem;
  --text-lead: 1.25rem;
  --text-body: 1.0625rem;
  --text-small: 0.8125rem;
  --text-micro: 0.6875rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.65;

  --tracking-display: 0.04em;
  --tracking-label: 0.16em;
  --tracking-nav: 0.12em;
  --tracking-cta: 0.1em;
  --tracking-studio: 0.48em;
  --tracking-koncordia: 0.06em;

  /* ——— Buttons / CTAs ——— */
  --btn-pad-y: 0.9em;
  --btn-pad-x: 1.4em;
  --btn-pad-y-header: 0.72em;
  --btn-pad-x-header: 1.15em;
  --btn-gap: var(--space-3);
  --btn-gap-compact: var(--space-2);
  --btn-lift: -1px;
  --btn-arrow-nudge: 3px;
  --btn-min-height: 2.75rem;
  --btn-underline-inset: 0.35em;

  /* ——— Form fields (contact instrument) ——— */
  --field-pad-y: 0.85rem;
  --field-pad-x: 0.9rem;
  --field-min-height: 2.75rem;
  --field-gap-label: var(--space-2);
  --field-annotate-gap: var(--space-3);
  --field-textarea-min: 8.5rem;

  /* ——— Space & layout ——— */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  /* Dense editorial rhythm — deliberate breath, not inflated voids */
  --space-section: clamp(2.75rem, 5.5vw, 4.25rem);
  --space-section-tight: clamp(1.75rem, 3.5vw, 2.75rem);
  --space-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Hero anchor — gap below navbar only (content already sits under the header) */
  --nav-height: 4.75rem;
  --hero-gap-after-nav: clamp(1.5rem, 4svh, 3.5rem);
  --hero-top: var(--hero-gap-after-nav);

  --container: min(1120px, calc(100% - 2 * var(--space-gutter)));
  --container-wide: min(1280px, calc(100% - 2 * var(--space-gutter)));
  /* Half the difference between the wide rail and the text rail.
     100% resolves against the element that uses the token (the hero grid),
     not 100vw — 100vw includes the scrollbar and ignores the containing block. */
  --rail-inset: max(0px, calc((min(1280px, 100%) - min(1120px, 100%)) / 2));
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 2vw, 1.5rem);

  --hairline: 1px;
  --radius-none: 0;
  --radius-soft: 2px;

  /* ——— Motion ——— */
  --ease-out-precise: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-micro: 180ms;
  --duration-ui: 320ms;
  --duration-enter: 720ms;
  --duration-hero: 1600ms;

  /* ——— Elevation (use sparingly) ——— */
  --shadow-fog: 0 1px 0 var(--color-fog), 0 12px 40px rgba(20, 20, 18, 0.06);

  /* ——— Z-index ——— */
  --z-base: 1;
  --z-nav: 100;
  --z-overlay: 200;
  --z-cursor: 300;
}

@media (max-width: 768px) {
  :root {
    --text-h3: 1.125rem;
    --text-lead: 1.125rem;
    --text-body: 1rem;
  }
}