/* Lofty Labz design tokens — Loop 1 verdict applied: hybrid "A surfaces + C discipline".
   Lavender field + purple-as-action + flat ink bookends; square-leaning geometry (browser-window motif);
   solid offset-block shadows (never alpha); type = Space Grotesk display + Source Sans 3 body.
   Alternatives + full verdict: docs/REVIEW_LOG.md (Loop 1). No gradients in the hero — ever. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/static/fonts/source-sans-3-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/static/fonts/source-sans-3-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* brand */
  --purple: #582d88;        /* primary; on light surfaces = interactive elements + hero display only */
  --purple-deep: #3e1f63;   /* visible step from --purple (1.36:1); gradient/hover partner */
  --brand-purple: var(--purple); /* consumed by flask-lines.svg */
  --ink: #1a0f2e;           /* flat dark bookends — no gradients */
  --ink-2: #2e1d4f;         /* raised dark surfaces (1.22:1 over --ink) */
  --lavender: #ede5ee;      /* light section base (from cards) */
  --lavender-2: #e3d5ea;    /* perceptible alternate light band (1.14:1) */
  --white: #ffffff;
  --near-black: #050606;
  --accent: #b794e6;        /* action color on dark — 7.3:1 on --ink */
  --accent-strong: #7a4fb5; /* hover/visited links on light — 4.7:1 on lavender */

  /* contextual (light sections default) */
  --bg: var(--lavender);
  --surface: var(--white);
  --text: var(--near-black);
  --text-soft: #4a3f57;
  --heading: var(--ink);    /* headings are ink on light; purple is reserved for action */
  --line: rgba(88, 45, 136, 0.18);
  --focus-ring: var(--purple);

  /* solid offset-block shadows (business-card window motif) — solid colors only, never alpha */
  --shadow-card: 6px 6px 0 0 #cbb7d6;
  --shadow-action: 4px 4px 0 0 var(--purple);

  /* type */
  --font-display: "Space Grotesk", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
  --step--1: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.19rem + 0.3vw, 1.4rem);
  --step-2: clamp(1.55rem, 1.45rem + 0.5vw, 1.95rem);
  --step-3: clamp(1.95rem, 1.77rem + 0.9vw, 2.45rem);
  --step-4: clamp(2.45rem, 2.15rem + 1.5vw, 3.05rem);
  --step-5: clamp(3.05rem, 2.55rem + 2.5vw, 3.8rem);

  /* spacing / shape — square-leaning geometry ties cards to the browser-window motif */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --section-pad: clamp(64px, 10vw, 128px);
  --content-max: 1200px;
  --radius-card: 2px;
  --radius-ctl: 4px;

  /* motion */
  --dur-micro: 150ms;
  --dur-section: 400ms;
  --dur-grand: 700ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* dark-section context */
.theme-dark {
  --bg: var(--ink);
  --surface: var(--ink-2);
  --text: #ede2f0;
  --text-soft: #b6a8c8;
  --heading: var(--white);
  --line: rgba(237, 226, 240, 0.18);
  --focus-ring: var(--accent);
  --shadow-card: 6px 6px 0 0 #0d0717;
  --shadow-action: 4px 4px 0 0 var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0.01ms;
    --dur-section: 0.01ms;
    --dur-grand: 0.01ms;
  }
}