/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ---------------------------------------------------------------------------
   The single place the design system is defined. Every colour, shadow, radius,
   blur, duration and layout width used by theme.css and the blocks resolves to
   a custom property declared here. Change the system here, not in components.
   Source of truth: scaleminds-spatial-organized_6.html. Values are copied verbatim.
   ═══════════════════════════════════════════════════════════════════════════ */

: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);
}