/* =========================================================================
   01 — TOKENS
   The only file allowed to contain raw colour values. Everything downstream
   consumes var(--token) exclusively.

   THEME NOTE — this site is intentionally light-only.
   Manoproga's identity is warm paper: cream, taupe, sage, clay. A dark
   inversion would read as a different brand, so there is deliberately no
   `@media (prefers-color-scheme: dark)` block and no [data-theme] switch.
   Do not add one. `color-scheme: light` below tells the UA to keep form
   controls and scrollbars light even when the OS is in dark mode.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- Surfaces ---- */
  --bg: #F5F1EA;
  --bg-alt: #ECE3D6;
  --bg-deep: #E4D9C8;
  --surface: #FFFFFF;

  /* ---- Taupe (structure) ---- */
  --taupe: #D8C7B0;
  --taupe-strong: #B8A689;
  --taupe-line: #8F7E63;

  /* ---- Sage (brand accent) ---- */
  --sage: #6F7B5E;
  --sage-dark: #5C684D;
  --sage-deeper: #525D45;
  --sage-tint: #EDF0E8;

  /* ---- Ink ---- */
  --ink: #3D3A33;
  --ink-soft: #6B6455;
  --on-sage: #FFFFFF;

  /* ---- Clay (sale / alert) ---- */
  --clay: #A35C44;
  --clay-tint: #F3E5DF;

  /* ---- Type families ---- */
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Lato", "Segoe UI", Arial, sans-serif;

  /* ---- Type scale ---- */
  --fs-display: clamp(2.125rem, 1.25rem + 3.75vw, 3.75rem);
  --fs-h2: clamp(1.625rem, 1.15rem + 2vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --fs-h4: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-overline: .75rem;

  /* ---- Rhythm ---- */
  --lh-tight: 1.15;
  --lh-body: 1.7;
  --ls-wide: .14em;
  --ls-nav: .12em;

  /* ---- Space ---- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Layout ---- */
  --section-pad: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Radii ---- */
  --r-xs: 2px;
  --r-sm: 6px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 3px rgba(61, 58, 51, .06);
  --shadow-md: 0 6px 24px rgba(61, 58, 51, .08);
  --shadow-lg: 0 16px 48px rgba(61, 58, 51, .12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 220ms;
  --dur-slow: 450ms;

  /* ---- Derived (theme-internal, still token-only) ---- */
  --header-h: 88px;
  --header-h-sm: 64px;
  --focus-ring: 2px solid var(--sage-deeper);
  --focus-offset: 3px;
  --z-header: 100;
  --z-drawer: 200;
}

@media (max-width: 1023.98px) {
  :root {
    --header-h: var(--header-h-sm);
  }
}

/* -------------------------------------------------------------------------
   ACCESSIBILITY CONTRACT — enforced by convention, not by the compiler.

   • Button fills use --sage-dark. --sage against white is 4.50:1 — technically
     a pass with zero margin, so it is reserved for large display type only.
   • --taupe-strong is DECORATIVE ONLY (2.11:1). Never text, never an icon,
     never a form border. Functional hairlines use --taupe-line.
   • Sage-coloured text is permitted at 24px+ only; below that use --sage-dark.
   • Every interactive element shows a :focus-visible ring.
   • Tap targets are never smaller than 44×44.
   ---------------------------------------------------------------------- */