/* ===========================================================================
   SCALE MINDS / SPATIAL DESIGN SYSTEM v3.2.2  ·  01 · TOKENS
   ---------------------------------------------------------------------------
   Direction: Spatial UI (layered material), not decorative glassmorphism.
   Depth is structural: every surface sits on a known plane (z0 canvas →
   z1 recessed → z2 raised → z3 floating → z4 chrome). Translucency is used
   only where something genuinely overlaps something else.

   Brand rules preserved: Inter only · no italics (weight + colour = emphasis)
   · green is the single accent · red/amber are functional signals only
   · on dark green planes the only accent is --yellow (echoes the logo yellow;
     5.83:1 on green, 11.1:1 on green-deep). Never yellow on light glass.
   · the multi-colour Scale Minds logo mark is the ONE sanctioned exception to
     the single-accent rule. Logo mark colours never leak into UI elements.
   Ratio holds at ~60% light canvas / 30% neutral material / 10% green.
   All body and UI text verified ≥ 4.5:1 against its effective backdrop;
   translucent panels are kept ≥ 72% opaque so contrast never depends on
   what happens to scroll beneath them.

   THIS FILE IS THE SINGLE SOURCE OF TRUTH for the design system. It is loaded
   on the front end AND inside the block editor, so changing a token here
   changes both. Do not duplicate these values elsewhere.
   =========================================================================== */

:root{
  --f-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  /* -- Canvas (z0): luminous, not flat white -- */
  --canvas:#F1F3F2;
  --canvas-2:#E9ECEA;

  /* -- Material surfaces -- */
  --mat-1:rgba(255,255,255,.72);   /* recessed / quiet fill */
  --mat-2:rgba(255,255,255,.82);   /* standard card         */
  --mat-3:rgba(255,255,255,.92);   /* raised / interactive  */
  --mat-solid:#FFFFFF;
  --mat-tint:rgba(11,95,50,.05);   /* green-tinted material */

  /* -- Edges: spatial surfaces have a lit top edge and a shadowed base -- */
  --edge:1px solid rgba(255,255,255,.85);
  --hairline:rgba(23,32,28,.10);
  --hairline-2:rgba(23,32,28,.16);

  /* -- Ink -- */
  --fg-1:#141917;
  --fg-2:#333B37;
  --fg-3:#4E5853;
  --fg-4:#626C67; /* lowest safe text on any surface - 4.88:1 on canvas */

  /* -- Green (single accent) -- */
  --green:#0B5F32;
  --green-2:#094F2A;
  --green-deep:#062E1B;
  --green-lift:#127B42;
  --green-tint:#E6F0EA;
  --yellow:#FFDE21;          /* dark green surfaces ONLY - arrows, glyphs, em; 5.83:1 on green */
  --fg-on-green:#FFFFFF;

  /* -- Functional signals -- */
  --red:#B22F1D;
  --red-tint:rgba(178,47,29,.07);
  --amber:#7A4C00;           /* reserved functional warning - not yet in use */

  /* -- Elevation: ambient (soft, wide) + key (tight, directional) + rim -- */
  --elev-1:
    0 1px 1px rgba(20,30,25,.04),
    0 2px 6px rgba(20,30,25,.05);
  --elev-2:
    0 1px 1px rgba(20,30,25,.04),
    0 4px 10px rgba(20,30,25,.05),
    0 12px 28px rgba(20,30,25,.06);
  --elev-3:
    0 2px 4px rgba(20,30,25,.05),
    0 10px 24px rgba(20,30,25,.07),
    0 28px 60px rgba(20,30,25,.09);
  --elev-4:
    0 4px 8px rgba(20,30,25,.06),
    0 18px 40px rgba(20,30,25,.10),
    0 48px 96px rgba(20,30,25,.12);
  /* inner rim light: the thing that makes a surface read as a physical plane */
  --rim:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5);

  --blur-1:saturate(160%) blur(14px);
  --blur-2:saturate(180%) blur(28px);
  --blur-3:saturate(190%) blur(44px);

  --space-1:4px;  --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px; --space-6:32px;  --space-7:48px;  --space-8:64px;
  --space-9:96px; --space-10:128px;

  /* Spatial UI runs on larger, softer radii, so surfaces read as tiles, not boxes */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  --focus-ring:0 0 0 3px var(--canvas), 0 0 0 5px var(--green-lift);
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms; --dur-base:260ms; --dur-slow:520ms;

  --container:1240px;
  --pad:clamp(16px,3vw,40px);
  /* Half the section-to-section gap: every block carries this on both sides,
     so ALL vertical rhythm = 2x this value (112px desktop / 64px mobile).
     Kept tight because alternating tonal washes carry the section boundaries;
     whitespace no longer has to do that job alone. */
  --sec-pad:clamp(32px,3.9vw,56px);
}