/* ==========================================================================
   MOBILSISTEMI — tokens.css
   The single source of truth. No hex value may appear outside this file.
   ========================================================================== */

:root{
  /* === BRAND — from logo pixel analysis === */
  --ink:          #231F20;  /* wordmark black — all text, dark UI */
  --orange:       #F48120;  /* the figure — primary CTA, accents */
  --red:          #EC1C24;  /* the underline rule — section rules, active states */

  /* === SURFACES === */
  --paper:        #F3F0EC;  /* default page background */
  --paper-warm:   #EAE4DC;  /* modular buildings sections */
  --paper-steel:  #E3E5E4;  /* container sections */
  --paper-light:  #F7F5F2;  /* rental sections */
  --dark:         #141414;  /* factory / footer */
  --dark-2:       #1E1E1E;  /* elevated surface on dark */

  /* === DERIVED === */
  --orange-deep:  #D8690F;  /* hover on orange */
  --red-deep:     #C4141B;  /* hover on red */
  --ink-2:        #4A4644;  /* secondary text */
  --muted:        #8B8580;  /* tertiary — decorative marks, never body-size text */
  --line:         #D8D2C9;  /* hairline borders on paper */
  --line-dark:    #2E2E2E;  /* hairline borders on dark */

  /* --muted measures 3.21:1 on --paper, which fails WCAG 2.2 AA (4.5:1) for
     the 11px mono labels it was specified for. --muted-ink is the same warm
     grey walked down until it clears 4.5:1; it carries every mono label,
     eyebrow and caption. --muted itself stays for rules, ticks and icons,
     where the 3:1 non-text threshold applies. Clears 4.5:1 on all four light
     surfaces (paper 5.22, warm 4.70, steel 4.69, light 5.45). */
  --muted-ink:    #68635F;

  /* === TYPE === */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* === MOTION — one system, three curves, five durations ===
     Every animation on the site resolves to a pair from these two lists.
     A literal duration or easing anywhere else is a bug; AUDIT.md §5 greps
     for it. The earlier --ease-inout / --ease-hover / --t-* names are gone;
     every call site was rewritten onto the three curves below. */
  --ease-out:     cubic-bezier(.22, 1, .36, 1);   /* reveals, entrances       */
  --ease-in-out:  cubic-bezier(.65, 0, .35, 1);   /* state changes, toggles   */
  --ease-soft:    cubic-bezier(.33, 1, .68, 1);   /* hovers, small moves      */

  /* Duration scales with distance travelled: a 4px lift is --dur-xs, a 32px
     reveal is --dur-lg. Nothing moves 4px over 600ms. */
  --dur-xs: 140ms;   /* colour and opacity on small elements */
  --dur-sm: 220ms;   /* hovers, focus rings                  */
  --dur-md: 380ms;   /* panels, chips, tooltips              */
  --dur-lg: 640ms;   /* section reveals                      */
  --dur-xl: 960ms;   /* hero sequence                        */

  /* Hero entrance — the beats, as tokens so the sequence can be read in one
     place and nothing in sections.css is a literal. */
  --hero-fade:    var(--dur-xl);  /* slide cross-fade; hero-slider.js matches */
  --hero-settle:  1200ms;   /* image 1.06 -> 1                   */
  --hero-t-eyebrow: 200ms;
  --hero-t-line:    320ms;  /* +80ms per line                    */
  --hero-t-lede:    700ms;
  --hero-t-cta:     820ms;  /* the + button rides 60ms behind    */
  --hero-t-rail:   1000ms;

  /* === OPTICAL TRACKING ===
     Letter-spacing tightens as size grows, and uppercase always needs more
     than lowercase. These are applied by the type scale in base.css, never
     ad hoc. */
  --track-display-xl: -0.035em;   /* 96px and up */
  --track-display-l:  -0.028em;   /* 56–96       */
  --track-display-m:  -0.020em;   /* 32–56       */
  --track-heading:    -0.012em;   /* 20–32       */
  --track-body:        0;         /* 16–19       */
  --track-small:       0.005em;   /* 13–15       */
  --track-upper:       0.045em;   /* any uppercase run */
  --track-mono-label:  0.16em;    /* mono eyebrows, section labels */
  /* A fourth role the brief's list did not have, added rather than pretending
     .08em and .18em are the same value: compact UI labels — buttons, nav,
     chips — sit at 11–13px and read as gappy at the eyebrow's tracking. */
  --track-mono-ui:     0.10em;

  /* === RADII — only these three === */
  --r-xs: 2px;  --r-md: 10px;  --r-pill: 999px;

  /* ----------------------------------------------------------------------
     Extended system tokens — all derived from the locked values above.
     ---------------------------------------------------------------------- */

  /* Text on dark surfaces (the one light-text value the brief specifies) */
  --on-dark:      #E8E6E3;
  --on-dark-2:    #9A9793;   /* secondary text on dark */
  --white:        #FFFFFF;

  /* Component colour roles — swapped wholesale by .on-dark on <body> */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--muted-ink);
  --hairline:     var(--line);
  --surface:      var(--white);

  /* Alpha derivations of --ink (35 31 32) and --paper (243 240 236) */
  --ink-rgb:      35 31 32;
  --paper-rgb:    243 240 236;
  --orange-rgb:   244 129 32;
  --red-rgb:      236 28 36;

  /* Dark-surface hairlines use --line-dark, declared with the palette above.
     I briefly added a second token for this before finding it; two names for
     one value is precisely the drift AUDIT.md §1 exists to catch, so the
     duplicate is gone rather than aliased. --line is mixed for paper and goes
     muddy on #141414 — never use it inside a dark section. */

  --veil:         rgb(var(--ink-rgb) / .45);   /* hero image overlay */
  --veil-strong:  rgb(20 20 20 / .72);
  --dim-text:     rgb(var(--ink-rgb) / .18);   /* text-reveal resting colour */
  --dim-text-dark:rgb(232 230 227 / .22);

  /* === SPACE — 4px base, fluid at the section scale === */
  --s-1:  .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5:  1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9:  6rem;    --s-10: 8rem;
  /* Premium sites are mostly space. If a section feels cramped the answer is
     to remove content, not to reduce this. */
  --section-y:  clamp(96px, 14vh, 200px);
  --section-y-s:clamp(3.5rem, 7vw, 6rem);

  /* === LAYOUT === */
  --gutter:     clamp(1.25rem, 4vw, 3.5rem);
  /* The floating pill's height plus its top offset. Sticky columns clear it,
     and scroll-padding-top is derived from it. */
  --nav-h:      96px;
  --maxw:       94rem;    /* 1504px — wide editorial measure */
  --maxw-text:  62ch;
  --maxw-centered: 24ch;
  --grid-cols:  12;
  --grid-gap:   clamp(1rem, 2vw, 2rem);

  /* === GEOMETRY — the notched corner === */
  --notch-cut:  18px;   /* scaled down to 12px under 768px */
  --notch-r:    4px;

  /* === ELEVATION — three levels, ink-tinted, never neutral grey ===
     Cards carry NO shadow at rest; only --shadow-sm on hover. Floating UI
     (assistant panel, menu overlay) carries --shadow-lg. Overuse of shadow is
     the fastest way for a site to look like a template. */
  --shadow-sm: 0 1px 2px rgb(var(--ink-rgb) / .04), 0 2px 6px rgb(var(--ink-rgb) / .04);
  --shadow-md: 0 2px 4px rgb(var(--ink-rgb) / .04), 0 8px 24px rgb(var(--ink-rgb) / .06);
  --shadow-lg: 0 4px 8px rgb(var(--ink-rgb) / .05), 0 24px 56px rgb(var(--ink-rgb) / .10);
  /* Aliases so existing rules keep working; new code uses the names above. */
  --shadow-1:  var(--shadow-sm);
  --shadow-2:  var(--shadow-md);
  --shadow-3:  var(--shadow-lg);


  /* === Z-INDEX SCALE === */
  --z-base: 1;  --z-sticky: 20;  --z-cursor: 90;  --z-nav: 100;
  --z-overlay: 200;  --z-preloader: 300;

  /* === FIXED UI LAYER ===
     Four things want the bottom edge of the window: the scroll indicator, the
     assistant launcher, back-to-top and the mobile call bar. They are spaced
     and stacked from these, so a new one cannot be added by guessing an offset.

     --callbar-h is 0 by default and is set to the bar's measured height by
     back-to-top.js on the breakpoints where the bar is actually shown. The
     widgets lift by it, so nothing ever sits under the call bar. */
  --fixed-gap:      clamp(16px, 2.5vw, 32px);
  --fixed-z-widget: 90;
  --fixed-z-nav:    100;
  --fixed-z-overlay: 200;
  --callbar-h:      0px;
  /* Measured from the launcher by assistant.js. The hero's bottom rail keeps
     this much clear on the left so the two never collide. */
  --assistant-w:    0px;
  --safe-bottom:    env(safe-area-inset-bottom, 0px);
  /* Where the bottom row of fixed widgets starts. */
  --fixed-bottom:   calc(var(--fixed-gap) + var(--callbar-h) + var(--safe-bottom));
}

/* Dark sections: role tokens flip, brand tokens never do.

   .is-dark is applied to the section itself, so a dark block is correct on
   first paint and stays correct with JavaScript disabled. body.on-dark is set
   by bg-transition.js on top of that, for the elements that live outside the
   section — the nav pill and the cursor. */
.is-dark,
body.on-dark{
  --bg:        var(--dark);
  --fg:        var(--on-dark);
  --fg-2:      var(--on-dark-2);
  --fg-3:      var(--on-dark-2);
  --hairline:  var(--line-dark);
  --surface:   var(--dark-2);
  --dim-text:  var(--dim-text-dark);
}
/* .is-dark only re-roles the tokens; it never paints a background, so a
   section keeps whatever surface it chose. */
.is-dark{ color: var(--fg); }

@media (max-width: 768px){
  :root{ --notch-cut: 12px; }
}