/* GENERATED MIRROR — do not edit here. Source: base/tokens.contract.css (saulera-client-starter). Regenerate on change. */
/* base — semantic token CONTRACT (brand-agnostic)
 *
 * This is the interface between the base and any client pack. It declares every semantic
 * token the components in base/components.css reference, with NEUTRAL fallback defaults
 * (greyscale + one plain blue accent, a generic scale). No brand lives here.
 *
 * A client pack (e.g. client/saulera/tokens.css) is loaded AFTER this file and overrides
 * these values with its own. With no pack loaded, the base still renders as a coherent,
 * unbranded neutral theme — proving the base carries structure, not aesthetics.
 *
 * Rule: if base/components.css starts using a new semantic token, declare it HERE too.
 * Brand-specific values (a real palette, fonts, radius, type scale) belong in the pack.
 */

:root {
  /* ---- Colour: foreground / surface (light context) ---- */
  --color-fg:            #1a1a1a;
  --color-fg-muted:      #6b7280;
  --color-bg:            #ffffff;
  --color-bg-surface:    #f4f4f5;
  --color-border:        #d4d4d8;
  --color-border-strong: #1a1a1a;
  --color-white:         #ffffff;

  /* ---- Colour: accent ---- */
  --color-accent:           #2563eb;
  --color-accent-hover:     #1d4ed8;
  --color-accent-active:    #1e40af;
  --color-accent-fg:        #ffffff;
  --color-accent-secondary: #64748b;

  /* ---- Colour: inverse (content on a dark surface) ---- */
  --color-bg-inverse:           #1a1a1a;
  --color-fg-on-inverse:        #f4f4f5;
  --color-fg-on-inverse-strong: #ffffff;
  --color-fg-on-inverse-muted:  color-mix(in srgb, var(--color-fg-on-inverse) 50%, transparent);
  --color-fg-on-inverse-soft:   color-mix(in srgb, var(--color-fg-on-inverse) 82%, transparent);
  --color-inverse-line:         color-mix(in srgb, var(--color-fg-on-inverse) 12%, transparent);
  --color-inverse-wash:         color-mix(in srgb, var(--color-fg-on-inverse) 6%,  transparent);
  --color-on-dark-border:       color-mix(in srgb, var(--color-white) 50%, transparent);

  /* ---- Fonts (neutral system stack; a pack picks real faces) ---- */
  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Spacing (generic 4px scale) ---- */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* ---- Radius (non-zero default: radius is a brand choice, not a base rule) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ---- Shadows (neutral, black-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);

  /* ---- Layout ---- */
  --maxw:   1200px;
  --gutter: 24px;

  /* ---- Type ramp (generic modular scale) ---- */
  --type-display: clamp(40px, 6vw, 76px);
  --type-h1:      clamp(32px, 4vw, 56px);
  --type-h2:      clamp(24px, 2.5vw, 34px);
  --type-h3:      20px;
  --type-lead:    clamp(18px, 1.5vw, 22px);
  --type-body:    16px;
  --type-caption: 13px;
  --type-eyebrow: 12px;
}