/* ============================================================
   2Bdent — Design Tokens
   The single source of truth. No design values live outside this file.

   Palette: near-black ink, bone white, warm beige, one accent (muted oak).
   Type: Prata (display), Manrope (body).
   ============================================================ */

:root {
  /* ---- Base scale ----
     Root font-size 106.25% = 17px base (from the browser's 16px default).
     Every rem-based token (the whole type scale + spacing) steps up ~1px,
     so all text is slightly larger. Header height / container max are px
     and stay fixed. Media-query breakpoints are in px and are unaffected. */
  font-size: 106.25%;

  /* ---- Color: palette ----
     Light/beige dominant per the client brief: черно/бяло, светли и бежови
     нюанси. Ink is reserved for TYPE and small solid shapes (buttons, float
     actions) — it is no longer a section background. */
  --color-ink:        #17130d;   /* near-black, warm — primary text */
  --color-ink-soft:   #4a4238;   /* secondary text (8.8:1 on canvas) */
  --color-bone:       #f6f2ea;   /* THE canvas — warm off-white */
  --color-bone-lift:  #fbf7f0;   /* lifted surface (inputs, cards) */
  --color-beige:      #e7dac7;   /* warm beige — tint sections + footer */
  --color-hairline:   #d8c9b2;   /* 1px rules, borders, ring circle */
  --color-oak:        #b28a54;   /* THE accent — GRAPHICS only (lines, dots) */
  --color-oak-deep:   #a3855f;   /* accent, active/state — 3.1:1 on canvas */
  --color-oak-text:   #6f5533;   /* accent for TEXT — 6.2:1 canvas / 5.0:1 beige */
  --color-white:      #ffffff;

  /* ---- Color: semantic roles ---- */
  --bg:            var(--color-bone);
  --bg-surface:    var(--color-bone-lift);
  --bg-tint:       var(--color-beige);
  --bg-ink:        var(--color-ink);   /* buttons / overlays only */
  --text:          var(--color-ink);
  --text-muted:    var(--color-ink-soft);
  --text-on-ink:   var(--color-bone);  /* text inside ink buttons */
  --accent:        var(--color-oak);       /* decorative marks */
  --accent-hover:  var(--color-oak-deep);  /* active state */
  --accent-text:   var(--color-oak-text);  /* any oak TEXT — meets AA */
  --line:          var(--color-hairline);
  --line-on-ink:   rgba(246, 242, 234, 0.16);
  --text-on-ink-muted: rgba(246, 242, 234, 0.62);

  /* ---- Typography: families ---- */
  --font-display: "Prata", "Times New Roman", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Typography: fluid scale ---- */
  --fs-display: clamp(2.9rem, 1.4rem + 6.6vw, 6.25rem);   /* hero statement */
  --fs-h1:      clamp(2.35rem, 1.5rem + 3.4vw, 4rem);
  --fs-h2:      clamp(1.9rem, 1.35rem + 2.2vw, 3rem);
  --fs-h3:      clamp(1.5rem, 1.15rem + 1vw, 1.85rem);   /* min 24px — Prata floor */
  --fs-lead:    clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  /* ---- Typography: weights (Manrope only; Prata is single-weight 400) ---- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;

  /* ---- Typography: line-height & tracking ---- */
  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body:    1.72;
  --ls-display: -0.015em;
  --ls-eyebrow: 0.24em;
  --ls-tight:   -0.01em;

  /* ---- Spacing (8px rhythm) ---- */
  --space-2xs:  0.25rem;
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2.5rem;
  --space-2xl:  4rem;
  --space-3xl:  6rem;
  --space-4xl:  9rem;

  /* ---- Layout ---- */
  --container-max:  1280px;
  --container-text: 66ch;
  --gutter:         clamp(1.25rem, 5vw, 4.5rem);
  --header-h:       80px;
  --header-h-mobile:64px;

  /* ---- Radius (restrained; the design is mostly square) ---- */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-pill:999px;

  /* ---- Shadows (warm, minimal) ---- */
  --shadow-sm:  0 1px 2px rgba(23, 19, 13, 0.05);
  --shadow-md:  0 12px 32px rgba(23, 19, 13, 0.09);
  --shadow-lg:  0 24px 60px rgba(23, 19, 13, 0.14);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   340ms;
  --dur-slow:   680ms;
  --dur-draw:   1400ms;   /* signature line-draw */

  /* ---- Z-index ----
     NOTE: .site-header is position:fixed + --z-header, so it creates a stacking
     context. The mobile drawer (.site-nav) lives INSIDE it, so its --z-drawer
     value is scoped to that context. The backdrop is a SIBLING of the header,
     so it must stay BELOW --z-header or it would paint over the drawer and
     swallow taps on the nav links. */
  --z-header:   1000;
  --z-drawer:   1100;
  --z-backdrop: 990;   /* above page content + float buttons, below the header */
  --z-float:    900;
}