/* ==========================================================================
   Maddrell Design: depth system  (site/depth.css)
   One source for layered surfaces, elevation, paper grain, the torn-receipt
   shadow, tactile press and hover lift. Load it on the marketing site, the
   service pages, the portal and the brand guide:

     <link rel="stylesheet" href="/depth.css">      (path as appropriate)

   It only defines custom properties, plus opt-in classes prefixed .d-
   Nothing here restyles an element until you use a token or a class.
   Brand tokens it reads (with fallbacks): --paper --ink --fog --volt.
   Volt stays the one accent: depth is tonal and in shadow, never in colour.

   ---- LAYERS (back to front) -------------------------------------------
   --paper-page    page ground. Use on <body> via .d-page (adds the grain)
   --fog-a/--fog-b panel gradient, top to bottom. Panels that hold cards
                   (.d-fog) or recessed lanes/columns (.d-recess)
   --surface-card  white card, the top layer. Use for anything clickable
   --edge          hairline that defines a layer edge on paper/fog

   ---- ELEVATION SCALE (multi-layer, soft, warm black) -------------------
   --elev-0  none          pressed or flat
   --elev-1  resting chip, thumbnail, small control (.d-card-s)
   --elev-2  resting card  (.d-card)
   --elev-3  floating: drawer, side panel, menus, popovers (.d-float)
   --elev-4  hover lift: card raised under the pointer (.d-lift:hover)
   Shadow-only utilities (keep your own border and radius): .d-e1 .d-e2 .d-e3
   --receipt-shadow  the drop-shadow chain for torn paper (use as filter)
   --drawer-shadow   the shadow of a drawer/side panel that slides in from the right

   ---- MOTION -----------------------------------------------------------
   --lift-y        hover rise, -3px. Lift uses the CSS `translate` property, so it
                   composes with a rotated sticker; never scale text
   --t-fast .12s   press and release
   --t-base .18s   hover lift, colour changes
   --t-slow .24s   drawer and panel entrance
   --ease          cubic-bezier(.2,.8,.2,1)
   Reduced motion: movement is removed, the shadow still changes.

   ---- OTHER ------------------------------------------------------------
   --grain         paper noise as an inline SVG (no extra request), ~5% ink
   --paper-grain   grain + soft volt glow + tonal wash, for background-image
   --press-edge    the solid 2px under-edge of a button (.d-press)
   .d-receipt      drop-shadow chain that follows a torn/zigzag edge, so the
                   receipt casts a shadow like real paper (use filter, not
                   box-shadow, so the tear is respected). If the tear is made with
                   a CSS mask or clip-path, put .d-receipt on the PARENT of the
                   receipt: a filter on the masked element would be clipped.
   .d-hop          hover rise only, no shadow change (a receipt inside a .d-receipt parent)
   .d-receipt-lift adds the hover rise to a .d-receipt (shadow deepens too)

   ---- DO / DON'T -------------------------------------------------------
   Do lift only things you can click or open (cards, tickets, stickers that
   link, buttons). Do keep text still: no scale, no bounce, no rotation change.
   Don't stack lift on a whole page panel, a form, or a table. Don't add a
   second shadow colour or a glow: shadows are warm black only.
   Reduced motion keeps the shadow change and removes the movement.
   .d-thumb        rounded image with a light inner edge
   ========================================================================== */

:root{
  /* layers */
  --paper-page:#FBFBF8;
  --fog-a:#F3F3ED;
  --fog-b:#ECECE4;
  --surface-card:#FFFFFF;
  --edge:rgba(14,14,14,.12);

  /* elevation: ambient + contact + long soft, all warm black */
  --elev-0:0 0 0 rgba(14,14,14,0);
  --elev-1:0 1px 0 rgba(14,14,14,.04),0 1px 2px rgba(14,14,14,.07),0 4px 10px -4px rgba(14,14,14,.08);
  --elev-2:0 1px 0 rgba(14,14,14,.04),0 2px 4px rgba(14,14,14,.06),0 10px 20px -8px rgba(14,14,14,.12),0 24px 40px -24px rgba(14,14,14,.14);
  --elev-3:0 2px 4px rgba(14,14,14,.08),0 14px 28px -10px rgba(14,14,14,.2),0 40px 70px -30px rgba(14,14,14,.28);
  --elev-4:0 2px 4px rgba(14,14,14,.07),0 10px 18px -6px rgba(14,14,14,.16),0 22px 36px -12px rgba(14,14,14,.2),0 44px 60px -30px rgba(14,14,14,.2);
  --press-edge:0 2px 0 var(--ink,#0E0E0E);
  --receipt-shadow:drop-shadow(0 1px 1px rgba(14,14,14,.16)) drop-shadow(0 12px 12px rgba(14,14,14,.13)) drop-shadow(0 28px 26px rgba(14,14,14,.10));
  --receipt-shadow-lift:drop-shadow(0 2px 2px rgba(14,14,14,.16)) drop-shadow(0 18px 16px rgba(14,14,14,.16)) drop-shadow(0 40px 34px rgba(14,14,14,.12));
  --drawer-shadow:-30px 0 60px -20px rgba(14,14,14,.32),-2px 0 0 rgba(14,14,14,.05);

  /* motion */
  --lift-y:-3px;
  --t-fast:.12s;
  --t-base:.18s;
  --t-slow:.24s;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* paper grain (inline SVG noise, tileable) and the full page ground */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .055 0 0 0 0 .055 0 0 0 0 .055 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-grain:var(--grain),radial-gradient(1200px 520px at 78% -8%,rgba(34,255,107,.07),transparent 70%),linear-gradient(180deg,#FDFDFA 0%,#F6F6F0 100%);
}

/* ---- layers ---------------------------------------------------------- */
.d-page{background-color:var(--paper-page);background-image:var(--paper-grain);background-attachment:fixed,fixed,fixed}
.d-fog{background:linear-gradient(180deg,var(--fog-a),var(--fog-b));box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(14,14,14,.05),var(--elev-1);border-radius:26px}
.d-recess{background:linear-gradient(180deg,var(--fog-a),var(--fog-b));box-shadow:inset 0 2px 5px -2px rgba(14,14,14,.12),inset 0 0 0 1px rgba(14,14,14,.04);border-radius:18px}
.d-card{background:var(--surface-card);border:1px solid var(--edge);border-radius:22px;box-shadow:var(--elev-2)}
.d-card-s{background:var(--surface-card);border:1px solid var(--edge);border-radius:14px;box-shadow:var(--elev-1)}
.d-float{box-shadow:var(--elev-3);background:linear-gradient(180deg,#fff,#FCFCF8)}
.d-thumb{border-radius:12px;outline:1px solid rgba(14,14,14,.14);outline-offset:-1px}

/* ---- shadow-only utilities: add depth to something that already has its own border and radius */
.d-e1{box-shadow:var(--elev-1)}
.d-e2{box-shadow:var(--elev-2)}
.d-e3{box-shadow:var(--elev-3)}

/* ---- hop: the lift without a shadow change (for a child inside a parent that carries the shadow) */
.d-hop{transition:translate var(--t-base) var(--ease)}
@media (hover:hover){.d-hop:hover{translate:0 var(--lift-y)}}
.d-hop:active{translate:0 1px}

/* ---- the torn receipt casts a shadow like paper on a desk ------------ */
.d-receipt{filter:var(--receipt-shadow)}
.d-receipt-lift{transition:translate var(--t-base) var(--ease),filter var(--t-base) var(--ease)}
@media (hover:hover){.d-receipt-lift:hover{translate:0 var(--lift-y);filter:var(--receipt-shadow-lift)}}

/* ---- hover lift: cards and interactive surfaces ---------------------- */
.d-lift{transition:translate var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),background-color var(--t-base),border-color var(--t-base),color var(--t-base)}
.d-lift:active{translate:0 1px;box-shadow:var(--elev-0);transition-duration:var(--t-fast)}
@media (hover:hover){
  .d-lift:hover{translate:0 var(--lift-y);box-shadow:var(--elev-4)}
  .d-lift:hover:active{translate:0 1px;box-shadow:var(--elev-0)}
}

/* ---- tactile press: solid under-edge that rises on hover, sinks on press */
.d-press{box-shadow:var(--press-edge);transition:translate var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-base),color var(--t-base)}
@media (hover:hover){.d-press:hover{translate:0 -2px;box-shadow:0 4px 0 var(--ink,#0E0E0E)}}
.d-press:active,.d-press:hover:active{translate:0 2px;box-shadow:var(--elev-0)}

/* ---- reduced motion: no movement, shadows still respond -------------- */
@media (prefers-reduced-motion:reduce){
  .d-lift,.d-press,.d-receipt-lift{transition:box-shadow var(--t-fast),filter var(--t-fast),background-color var(--t-fast),color var(--t-fast)}
  .d-lift:hover,.d-lift:active,.d-press:hover,.d-press:active,.d-receipt-lift:hover,.d-hop:hover,.d-hop:active{translate:none}
}

/* ==========================================================================
   ADDITIONS 2026-10-24 (depth audit fixes). Additive only: nothing above this
   line was changed. Reuse these on any page that loads this file.

   TOKENS
   --elev-bar            the cast shadow of a sticky bar (site nav, portal header); sits on the scale between --elev-1 and --elev-2
   --edge-ink            raised edge for cards, tabs and thumbnails on an INK ground, where a warm-black shadow cannot show
   --inset-recess        shadow-only recess (the sunk look of .d-recess, without its fill or radius): drop zones, wells
   --press-edge-light    press under-edge for a button that sits on an INK ground (white at 55%)
   --press-edge-graphite press under-edge for an INK-FILLED button, where an ink edge would merge into the fill

   CLASSES
   .d-on-ink             resting raised edge (--edge-ink). With .d-lift it keeps the edge on hover and press
   .d-in                 shadow-only recess (--inset-recess)
   .d-press-light        add to .d-press: white under-edge, for buttons on ink
   .d-press-graphite     add to .d-press: graphite under-edge, for ink-filled buttons
   .d-thumb.d-on-ink     the thumbnail's inner edge turns white-at-16% on an ink ground
   .d-thumb-box          like .d-thumb, for a CONTAINER whose pictures are absolutely positioned (the pictures paint over a container's outline, so the edge is drawn by an overlay above them). Pair with .d-on-ink on ink
   ========================================================================== */
:root{
  --elev-bar:0 10px 14px -12px rgba(14,14,14,.4);
  --edge-ink:inset 0 1px 0 rgba(255,255,255,.10);
  --inset-recess:inset 0 2px 5px -2px rgba(14,14,14,.12),inset 0 0 0 1px rgba(14,14,14,.04);
  --press-edge-light:0 2px 0 rgba(255,255,255,.55);
  --press-edge-graphite:0 2px 0 var(--graphite,#2A2A2A);
}

/* ---- ink ground: raised by a light top edge, since shadow cannot show on #0E0E0E */
.d-on-ink{box-shadow:var(--edge-ink)}
.d-on-ink.d-lift:active{box-shadow:var(--edge-ink)}
@media (hover:hover){
  .d-on-ink.d-lift:hover{box-shadow:var(--edge-ink),var(--elev-4)}
  .d-on-ink.d-lift:hover:active{box-shadow:var(--edge-ink)}
}
.d-thumb.d-on-ink{outline-color:rgba(255,255,255,.16)}
.d-thumb-box{position:relative}
.d-thumb-box::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(14,14,14,.14);pointer-events:none}
.d-thumb-box.d-on-ink::before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}

/* ---- shadow-only recess */
.d-in{box-shadow:var(--inset-recess)}

/* ---- press edge colour variants (use together with .d-press) */
.d-press-light{box-shadow:var(--press-edge-light)}
.d-press-graphite{box-shadow:var(--press-edge-graphite)}
@media (hover:hover){
  .d-press-light:hover{box-shadow:0 4px 0 rgba(255,255,255,.55)}
  .d-press-graphite:hover{box-shadow:0 4px 0 var(--graphite,#2A2A2A)}
}
.d-press-light:active,.d-press-light:hover:active,.d-press-graphite:active,.d-press-graphite:hover:active{box-shadow:var(--elev-0)}

/* ---- reduced motion, press while hovering: the base rule above only clears :hover and :active on their own,
   so a pointer held down on a hovered .d-lift / .d-press (specificity 0,3,0) still moved 1-2px. Cleared here. */
@media (prefers-reduced-motion:reduce){
  .d-lift:hover:active,.d-press:hover:active,.d-hop:hover:active{translate:none}
}