/* ═══════════════════════════════════════════════════════════════════════════
   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(var(--green-rgb),.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(var(--ink-rgb),.10);
  --hairline-2:rgba(var(--ink-rgb),.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(var(--red-rgb),.07);
  --amber:#7A4C00;           /* reserved functional warning - not yet in use */

  /* ── Elevation: ambient (soft, wide) + key (tight, directional) + rim ── */
  --elev-1:
    0 1px 1px rgba(var(--shadow-rgb),.04),
    0 2px 6px rgba(var(--shadow-rgb),.05);
  --elev-2:
    0 1px 1px rgba(var(--shadow-rgb),.04),
    0 4px 10px rgba(var(--shadow-rgb),.05),
    0 12px 28px rgba(var(--shadow-rgb),.06);
  --elev-3:
    0 2px 4px rgba(var(--shadow-rgb),.05),
    0 10px 24px rgba(var(--shadow-rgb),.07),
    0 28px 60px rgba(var(--shadow-rgb),.09);
  --elev-4:
    0 4px 8px rgba(var(--shadow-rgb),.06),
    0 18px 40px rgba(var(--shadow-rgb),.10),
    0 48px 96px rgba(var(--shadow-rgb),.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);

  /* ── Colour channels + extras. Referenced by the tokenised stylesheet and
        overridden by Site Settings → Design; keep in sync with the hexes above. ── */
  --green-rgb:11,95,50; --green-lift-rgb:18,123,66; --green-deep-rgb:6,46,27;
  --green-tint-rgb:230,240,234; --tint-2-rgb:240,245,242;
  --red-rgb:178,47,29; --yellow-rgb:255,222,33; --ink-rgb:23,32,28; --shadow-rgb:20,30,25;
  --green-lift-2:#0E6E3B; --canvas-hi:#F5F7F6;
  --ph-1:#E7EBE9; --ph-2:#DBE1DE; --ph-3:#CDD5D1; --ph-rgb:214,222,218;
  --f-heading:var(--f-sans);
  --logo-h:34px; --foot-logo-h:40px;
  /* Signature gradients: buttons, dark panels (CTA shell, dark footer, dark mega
     menus), the hero visual and the tonal section wash. */
  --grad-btn:linear-gradient(180deg,var(--green-lift),var(--green));
  --grad-btn-hover:linear-gradient(180deg,var(--green),var(--green-2));
  --grad-panel:linear-gradient(155deg,var(--green-lift-2) 0%, var(--green) 45%, var(--green-deep) 100%);
  --grad-shell:linear-gradient(155deg,var(--green-lift-2) 0%, var(--green) 40%, var(--green-deep) 100%);
  --grad-visual:linear-gradient(160deg,var(--green-lift),var(--green) 55%,var(--green-2));
  --grad-visual-2:linear-gradient(160deg,var(--green-lift),var(--green) 60%,var(--green-2));
  --grad-tonal:linear-gradient(180deg, rgba(var(--green-rgb),.045), rgba(var(--green-rgb),0) 78%);
}