/* =========================================================================
   Set In Stone - design tokens
   Every colour, size, and timing in the site resolves to something here.
   ========================================================================= */

:root {
  /* ---- Brand red ------------------------------------------------------
     Evolved from the existing #930404 toward bordeaux. Same family, still
     recognisably theirs, but it recedes behind granite instead of competing
     with it. The original is retained so signage and vehicle wraps still match. */
  --red-50:  #FBF3F3;
  --red-100: #F5E1E2;
  --red-200: #E7BCBE;
  --red-300: #D18E92;
  --red-400: #B05056;
  --red-500: #96262E;
  --red-600: #7E1A22;   /* primary */
  --red-700: #6A141B;   /* hover */
  --red-800: #4E0E13;
  --red-900: #33090C;
  --red-legacy: #930404;

  /* ---- Warm stone neutrals - the canvas ------------------------------- */
  --stone-50:  #FAF8F5;
  --stone-100: #F3EFE9;
  --stone-200: #E7E1D7;
  --stone-300: #D2C9BB;
  --stone-400: #A99F8F;
  --stone-500: #7E7566;
  --stone-600: #5B554B;
  --stone-700: #413B34;
  --stone-800: #2B2722;
  --stone-900: #1B1815;
  --stone-950: #100E0C;

  /* ---- Brass - one restrained metal note, used sparingly -------------- */
  --brass-300: #D8BE95;
  --brass-400: #C4A473;
  --brass-500: #A98A56;
  --brass-600: #8A6F42;

  /* ---- Semantic (light) ---------------------------------------------- */
  --bg:            var(--stone-50);
  --bg-raised:     #FFFFFF;
  --bg-sunken:     var(--stone-100);
  --bg-inverse:    var(--stone-900);
  --text:          var(--stone-900);
  --text-muted:    var(--stone-600);
  --text-inverse:  var(--stone-50);
  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --accent:          var(--red-600);
  --accent-hover:    var(--red-700);
  --accent-contrast: #FFFFFF;
  --accent-subtle:   var(--red-50);
  /* A solid CTA needs a different red from a link. On dark grounds the link
     colour has to be light for contrast, but a light red as a BUTTON FILL
     reads pink and washed out - so buttons keep their own deep red. */
  --accent-solid:          var(--red-600);
  --accent-solid-hover:    var(--red-700);
  --accent-solid-contrast: #FFFFFF;
  --focus:         var(--brass-600);
  /* Stone is high-frequency texture: white text over it is unreadable without
     a real scrim. Two layers - a vertical lift for the whole lower half, and a
     horizontal one so the left-aligned copy always has a dark ground under it. */
  --scrim:
    linear-gradient(to right, rgb(16 14 12 / .80) 0%, rgb(16 14 12 / .55) 42%, rgb(16 14 12 / .12) 78%),
    linear-gradient(to top, rgb(16 14 12 / .85) 0%, rgb(16 14 12 / .5) 45%, rgb(16 14 12 / .18) 100%);

  /* ---- Type ----------------------------------------------------------- */
  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs:   clamp(.75rem,  .72rem + .15vw, .8125rem);
  --fs-sm:   clamp(.875rem, .84rem + .17vw, .9375rem);
  --fs-base: clamp(1rem,    .96rem + .2vw,  1.0625rem);
  --fs-md:   clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --fs-lg:   clamp(1.375rem,1.2rem  + .8vw, 1.75rem);
  --fs-xl:   clamp(1.75rem, 1.4rem  + 1.6vw,2.5rem);
  --fs-2xl:  clamp(2.125rem,1.6rem  + 2.6vw,3.5rem);
  /* Lower floor than the rest of the scale: at 375px a 2.5rem Bodoni headline
     eats the whole first screen and pushes the CTAs below the fold. */
  --fs-3xl:  clamp(2.15rem, 1.35rem + 3.6vw, 4.5rem);

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.62;
  --track-display: -.02em;
  --track-caps: .12em;

  /* ---- Space ---------------------------------------------------------- */
  --sp-3xs: .25rem; --sp-2xs: .5rem;  --sp-xs: .75rem;
  --sp-sm:  1rem;   --sp-md:  1.5rem; --sp-lg: 2.5rem;
  --sp-xl:  4rem;   --sp-2xl: 6rem;   --sp-3xl: 9rem;

  --section-y: clamp(3.5rem, 9vw, 8rem);
  --gutter:    clamp(1rem, 4vw, 2.5rem);
  --measure:   68ch;
  --container:        1280px;
  --container-narrow: 760px;
  --container-wide:   1600px;

  /* ---- Radius: small reads architectural, large reads SaaS ------------ */
  --r-xs: 2px; --r-sm: 3px; --r-md: 5px; --r-lg: 8px; --r-full: 999px;

  /* ---- Shadow: warm-tinted, low alpha. Stone does not float. ---------- */
  --sh-sm: 0 1px 2px rgb(27 24 21 / .05);
  --sh-md: 0 2px 4px rgb(27 24 21 / .05), 0 6px 16px rgb(27 24 21 / .07);
  --sh-lg: 0 4px 8px rgb(27 24 21 / .05), 0 16px 40px rgb(27 24 21 / .10);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(.2, .6, .3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  --header-h: 4.25rem;
  --stickybar-h: 3.5rem;
}

/* ---- Dark: stone photography looks best on a warm near-black ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--stone-950);
    --bg-raised:     var(--stone-900);
    --bg-sunken:     #0A0908;
    --bg-inverse:    var(--stone-100);
    --text:          var(--stone-100);
    --text-muted:    var(--stone-400);
    --text-inverse:  var(--stone-900);
    --border:        #2E2A25;
    --border-strong: #423C35;
    --accent:          var(--red-300);
    --accent-hover:    var(--red-200);
    --accent-contrast: var(--stone-950);
    --accent-subtle:   #241012;
    --accent-solid:          var(--red-500);
    --accent-solid-hover:    var(--red-400);
    --accent-solid-contrast: #FFFFFF;
    --focus:         var(--brass-400);
  }
}

:root[data-theme="dark"] {
  --bg:            var(--stone-950);
  --bg-raised:     var(--stone-900);
  --bg-sunken:     #0A0908;
  --bg-inverse:    var(--stone-100);
  --text:          var(--stone-100);
  --text-muted:    var(--stone-400);
  --text-inverse:  var(--stone-900);
  --border:        #2E2A25;
  --border-strong: #423C35;
  --accent:          var(--red-300);
  --accent-hover:    var(--red-200);
  --accent-contrast: var(--stone-950);
  --accent-subtle:   #241012;
  --accent-solid:          var(--red-500);
  --accent-solid-hover:    var(--red-400);
  --accent-solid-contrast: #FFFFFF;
  --focus:         var(--brass-400);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}