/* ============================================================
   Sitemate shared tokens — THE single source of design variables.
   ------------------------------------------------------------
   base.css @imports this file and consumes these vars (it no longer
   declares its own :root). The footer + pages read them too, and the
   shadow-DOM header inlines them into its :host at build time (a shadow
   root can't see outer CSS) — so there is one source, never a drift.
   Also imports the brand fonts. Conventions: see standards.md.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500;700&family=Roboto:wght@400;500;700&display=swap");

:root {
  /* Brand blue ramp */
  --sm-blue: #0085e8;
  --sm-blue-light: #d8e6f6;
  --sm-blue-dark: #0b62af;
  --sm-blue-accent: #003166;

  /* Text */
  --sm-text: #2e3940;
  --sm-text-body: #747474;

  /* Greys */
  --sm-grey-1: #f5f6f7;
  --sm-grey-2: #ebedef;
  --sm-grey-3: #e0e2e4;
  --sm-grey-4: #d0d2d4;
  --sm-grey-5: #b0b2b4;

  /* Semantic aliases */
  --sm-border: var(--sm-grey-3);
  --sm-bg-grey: var(--sm-grey-1);
  --sm-blue-hover: var(--sm-blue-dark); /* blue-button hover */
  --sm-bg-grey-hover: var(--sm-grey-2); /* grey-button hover */
  --sm-blue-pale: #f5f9fd; /* lightest blue — table row hover / highlighted column */
  --sm-red: #e3514d; /* not-available / error */

  /* Effects */
  --soft-shadow: 0 0 12px rgba(0, 0, 0, 0.1);

  /* Layout — the whole site is 1328px edge to edge (no extra padding).
     Use: width: min(100% - 48px, var(--content-max)) so content is exactly
     1328 at full width and gets a 24px gutter each side below that. */
  --content-max: 1328px;
  --nav-h: 64px; /* shared header height, for sticky offsets */

  /* 8px spacing grid */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  /* Fluid type scale */
  --font-h1: clamp(1.875rem, 1.6rem + 1.05vw, 2.5rem);
  --font-h2: clamp(1.5rem, 1.35rem + 0.63vw, 1.875rem);
  --font-h3: clamp(1.125rem, 1.07rem + 0.2vw, 1.25rem);
  --font-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
}