/* ============================================================================
   JULES  ·  V3 TOKEN EXTENSION  ·  layer 4  ·  return 3, 24 Aug 2026

   Load order, and it matters:
     1  kin-core.css            Kin master tokens + k- component layer
     2  jules-tokens.css        Fusion Line literals + Jules colour law
     3  jules-components.css    the j- component layer
     4  jules-app.css           the jx- chassis
     5  jules-v3-tokens.css     THIS FILE
     6  jules-v3.css            the elevation layer, token references only

   THIS FILE ADDS NO COLOUR. Every value below is either a white/black alpha
   (material, not colour), a size, or an alias onto an existing token. The
   colour law from jules-tokens.css is untouched: graphite grounds, lime live,
   amber asks, clay fails, teal is the human subject and the operator.
   ========================================================================== */

:root {

  /* --- Material ladder. Depth is light on machined graphite, never glass. -- */
  --mat-sheen:      linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.008) 34%, rgba(255,255,255,0) 62%);
  --mat-sheen-hi:   linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.010) 40%, rgba(255,255,255,0) 70%);
  --mat-lift:       0 1px 0 rgba(255,255,255,0.045) inset, 0 18px 40px -28px rgba(0,0,0,0.62), 0 2px 8px -4px rgba(0,0,0,0.5);
  --mat-lift-hi:    0 1px 0 rgba(255,255,255,0.06) inset, 0 32px 64px -36px rgba(0,0,0,0.78), 0 3px 10px -4px rgba(0,0,0,0.55);
  --mat-well:       inset 0 2px 8px -2px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.25);
  --mat-edge-lit:   rgba(255,255,255,0.11);

  /* --- Type hierarchy steps. Same three families, more registers. --------- */
  --t-kicker:       10.5px;                       /* mono, +0.18em, uppercase */
  --t-page:         clamp(30px, 2.6vw, 40px);     /* Bricolage 700, page name */
  --t-section:      11px;                         /* mono section labels */
  --t-fact:         22px;                         /* a number a decision reads */
  --t-fact-lg:      clamp(26px, 2.2vw, 34px);     /* the amount on a pay card */

  /* --- The presence scale. One component, five mounts. -------------------- */
  --pres-hero:      100%;
  --pres-mast:      84px;
  --pres-rail:      40px;
  --pres-empty:     168px;
  --pres-ring:      var(--edge);
  --pres-ring-live: var(--olive-lift);
  --pres-ring-ask:  var(--amber);
  --pres-ring-done: var(--olive-lift);
  --pres-ring-hum:  var(--human-38);

  /* --- Arrival. One short sequence per session, then the page settles. ---- */
  --d-arrive:       420ms;
  --arrive-rise:    8px;
  --arrive-stagger: 55ms;

  /* --- Density. The desk stays compact when populated. -------------------- */
  --row-pad:        12px 14px;
  --row-gap:        14px;
}

@media (max-width: 767px) {
  :root {
    --pres-mast: 56px;
    --pres-empty: 128px;
    --t-fact: 19px;
  }
}