/**
 * Atomac shared design tokens — marketing subset
 * Canonical product source: apps/workspace/src/styles/tokens.css
 * Direction: product/design/direction.md
 *
 * Import or copy values into styles.css. Do not invent parallel token names
 * for the same roles without updating this file.
 */

:root {
  /* ——— Type ——— */
  /* Adobe Fonts kit yuy4ofq: aktiv-grotesk-extended (wordmark) + inter-variable (UI) — matches workspace app */
  --font-wordmark: "aktiv-grotesk-extended", sans-serif;
  --font-brand: "inter-variable", sans-serif;
  --font-ui: "inter-variable", sans-serif;

  /* Scale: minor third (UI) + larger marketing clamps */
  --text-xs: 0.694rem;
  --text-sm: 0.833rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.44rem;
  --text-2xl: 1.728rem;
  --text-3xl: 2.074rem;
  --text-hero: clamp(2.5rem, 6.5vw, 4rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wordmark: 0.14em;

  /* ——— Blue ramp (marketing + interactive) ——— */
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  /* ——— Light / app (instrument) ——— */
  --bg-canvas: #eef1f5;
  --bg-panel: #f8f9fb;
  --bg-elevated: #ffffff;
  --bg-ink: #12141a;

  --text-primary: #12141a;
  --text-secondary: #3c4450;
  --text-muted: #6b7380;
  --text-inverse: #eef1f5;

  --border-subtle: #e4e7ec;
  --border-strong: #c9ced6;

  --accent: var(--color-action-accent);
  --accent-strong: var(--blue-800);
  --accent-soft: #e8f1fd;

  --sev-critical: #c4292e;
  --sev-needs-review: #b8600d;
  --sev-stable: #2f6b4f;
  --sev-info: #3a5f8a;

  /* ——— Dark / marketing page ——— */
  --mkt-bg: var(--extension-marketing-canvas);
  --mkt-bg-elevated: var(--extension-marketing-surface);
  --mkt-bg-footer: var(--extension-marketing-footer);
  --mkt-fg: var(--extension-marketing-text-primary);
  --mkt-fg-muted: var(--extension-marketing-text-muted);
  --mkt-fg-subtle: #6b7380;
  --mkt-border: var(--extension-marketing-border);
  --mkt-accent: var(--color-action-accent);
  --mkt-accent-soft: var(--color-action-accent-soft);
  --mkt-atmosphere-a: #152033;
  --mkt-atmosphere-b: #12161e;

  /* ——— Marketing composition recipes ———
     Interface spacing (4/8/12/16/24/32) comes from Valence primitives directly.
     These are the larger, repeated composition steps unique to the marketing
     page. Job-named, not a generic numbered scale. */
  --mkt-block-gap: var(--primitive-space-48);     /* 48px — step inside a section, and the mobile reduction of section rhythm */
  --mkt-section-gap: var(--primitive-space-64);   /* 64px — vertical rhythm between top-level editorial sections */
  --mkt-page-end-gap: var(--primitive-space-96);  /* 96px — trailing space at the end of the main column */

  --page-pad: clamp(1.25rem, 4vw, 3rem);
  --content-width: 40rem;
  --hero-width: 46rem;
  --radius-card: var(--radius-surface);

  /* ——— Motion ——— */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ——— Glass (dark marketing + app chrome) ——— */
  --glass-bg: rgba(22, 26, 34, 0.45);
  --glass-bg-strong: rgba(22, 26, 34, 0.72);
  --glass-border: rgba(238, 241, 245, 0.1);
  --glass-blur: 16px;
  --glass-saturate: 1.15;
  --glass-veil-bg: rgba(14, 16, 20, 0.28);
  --glass-shadow:
    0 1px 0 rgba(255, 255, 245, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.18);
}