/*
 * ZenStorefront Design System — tokens.css
 * GENERATED MIRROR of tokens.json (canonical). Do not add values here that are not in tokens.json.
 * Regenerate: node src/zen-ds/scripts/tokens-to-css.mjs
 * Live check: /#/design-system/foundations → "Token sync check".
 */
:root {
  /* ---------- primitive: ink (teal-tinted neutrals) ---------- */
  --zen-ink-950: #070B0B;
  --zen-ink-900: #0B1112;
  --zen-ink-850: #0F1718;
  --zen-ink-800: #142021;
  --zen-ink-700: #1C2A2C;
  --zen-ink-600: #273739;
  --zen-ink-500: #3A4D50;
  --zen-ink-400: #7F9598;
  --zen-ink-300: #93A9AC;
  --zen-ink-200: #BACACC;
  --zen-ink-100: #DCE5E6;
  --zen-ink-50: #FCFDFD;

  /* ---------- primitive: teal (legacy green token names retained) ---------- */
  --zen-green-100: #BFEFEC;
  --zen-green-200: #8CE2DD;
  --zen-green-300: #40CFC6;
  --zen-green-400: #00BFB3;
  --zen-green-500: #00A298;
  --zen-green-700: #006962;
  --zen-green-900: #003936;

  /* ---------- primitive: status hues ---------- */
  --zen-red-300: #FF9D92;
  --zen-red-400: #F2685A;
  --zen-amber-300: #FFD27A;
  --zen-amber-400: #F2B33D;
  --zen-sky-300: #93CDFF;
  --zen-sky-400: #4FA8F0;

  /* ---------- semantic: colour roles ---------- */
  --zen-bg-canvas: var(--zen-ink-950);
  --zen-bg-raised: var(--zen-ink-900);
  --zen-surface-1: var(--zen-ink-850);
  --zen-surface-2: var(--zen-ink-800);
  --zen-surface-3: var(--zen-ink-700);
  --zen-fg-strong: var(--zen-ink-50);
  --zen-fg-default: var(--zen-ink-200);
  --zen-fg-muted: var(--zen-ink-300);
  --zen-fg-subtle: var(--zen-ink-400);
  --zen-fg-on-accent: var(--zen-ink-950);
  --zen-line-subtle: rgba(220, 229, 230, 0.07);
  --zen-line-default: rgba(220, 229, 230, 0.12);
  --zen-line-strong: rgba(220, 229, 230, 0.22);
  --zen-accent: var(--zen-green-300);
  --zen-accent-strong: var(--zen-green-200);
  --zen-accent-fill: var(--zen-green-400);
  --zen-accent-fill-hover: var(--zen-green-300);
  --zen-accent-fill-press: var(--zen-green-500);
  --zen-accent-soft: rgba(0, 191, 179, 0.12);
  --zen-accent-line: rgba(64, 207, 198, 0.34);
  --zen-eyebrow: var(--zen-green-100);
  --zen-focus: var(--zen-green-200);
  --zen-risk-high: var(--zen-red-300);
  --zen-risk-high-dot: var(--zen-red-400);
  --zen-risk-high-soft: rgba(242, 104, 90, 0.12);
  --zen-risk-high-line: rgba(242, 104, 90, 0.34);
  --zen-risk-medium: var(--zen-amber-300);
  --zen-risk-medium-dot: var(--zen-amber-400);
  --zen-risk-medium-soft: rgba(242, 179, 61, 0.12);
  --zen-risk-medium-line: rgba(242, 179, 61, 0.34);
  --zen-risk-none: var(--zen-green-300);
  --zen-risk-none-soft: rgba(0, 191, 179, 0.10);
  --zen-risk-none-line: rgba(64, 207, 198, 0.30);
  --zen-info: var(--zen-sky-300);
  --zen-info-dot: var(--zen-sky-400);
  --zen-info-soft: rgba(79, 168, 240, 0.12);
  --zen-info-line: rgba(79, 168, 240, 0.32);

  /* ---------- semantic: typography ---------- */
  --zen-font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --zen-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --zen-text-display: clamp(2.5rem, 1.55rem + 3.8vw, 4.5rem);
  --zen-text-h1: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  --zen-text-h2: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
  --zen-text-h3: 1.375rem;
  --zen-text-h4: 1.125rem;
  --zen-text-lede: 1.1875rem;
  --zen-text-body: 1rem;
  --zen-text-body-sm: 0.875rem;
  --zen-text-caption: 0.8125rem;
  --zen-text-label: 0.75rem;
  --zen-leading-display: 1.04;
  --zen-leading-h1: 1.08;
  --zen-leading-h2: 1.1;
  --zen-leading-h3: 1.25;
  --zen-leading-h4: 1.35;
  --zen-leading-lede: 1.55;
  --zen-leading-body: 1.65;
  --zen-leading-body-sm: 1.55;
  --zen-leading-caption: 1.45;
  --zen-leading-label: 1.2;
  --zen-tracking-display: -0.035em;
  --zen-tracking-h1: -0.03em;
  --zen-tracking-h2: -0.025em;
  --zen-tracking-h3: -0.015em;
  --zen-tracking-h4: -0.01em;
  --zen-tracking-body: 0em;
  --zen-tracking-label: 0.08em;
  --zen-weight-regular: 400;
  --zen-weight-medium: 500;
  --zen-weight-semibold: 600;

  /* ---------- semantic: space ---------- */
  --zen-space-1: 0.25rem;
  --zen-space-2: 0.5rem;
  --zen-space-3: 0.75rem;
  --zen-space-4: 1rem;
  --zen-space-5: 1.25rem;
  --zen-space-6: 1.5rem;
  --zen-space-8: 2rem;
  --zen-space-10: 2.5rem;
  --zen-space-12: 3rem;
  --zen-space-16: 4rem;
  --zen-space-20: 5rem;
  --zen-space-24: 6rem;
  --zen-space-32: 8rem;
  --zen-space-section-y: clamp(4.5rem, 2.75rem + 6vw, 8rem);
  --zen-space-section-y-compact: clamp(3rem, 2rem + 3vw, 4.5rem);
  --zen-space-header-gap: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);

  /* ---------- semantic: layout ---------- */
  --zen-container-content: 1200px;
  --zen-container-wide: 1320px;
  --zen-container-prose: 720px;
  --zen-container-header: 760px;
  --zen-gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2rem);
  --zen-grid-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --zen-nav-height: 64px;

  /* ---------- semantic: shape & depth ---------- */
  --zen-radius-xs: 4px;
  --zen-radius-sm: 6px;
  --zen-radius-md: 8px;
  --zen-radius-lg: 12px;
  --zen-radius-xl: 16px;
  --zen-radius-pill: 999px;
  --zen-border-hairline: 1px;
  --zen-border-focus: 2px;
  --zen-border-focus-offset: 2px;
  --zen-shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 64px -32px rgba(0, 0, 0, 0.7);
  --zen-shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(220, 229, 230, 0.12);
  --zen-glow: radial-gradient(60% 60% at 50% 0%, rgba(0, 191, 179, 0.16) 0%, rgba(0, 191, 179, 0) 70%);
  --zen-z-base: 0;
  --zen-z-raised: 10;
  --zen-z-sticky: 40;
  --zen-z-overlay: 80;
  --zen-z-modal: 90;
  --zen-z-tooltip: 110;

  /* ---------- semantic: icons ---------- */
  --zen-icon-sm: 16px;
  --zen-icon-md: 20px;
  --zen-icon-lg: 24px;
  --zen-icon-stroke: 1.75;

  /* ---------- semantic: motion ---------- */
  --zen-duration-fast: 120ms;
  --zen-duration-base: 200ms;
  --zen-duration-slow: 320ms;
  --zen-duration-progress: 900ms;
  --zen-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --zen-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reduced motion: collapse durations; components must not rely on motion to convey state. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --zen-duration-fast: 0.01ms;
    --zen-duration-base: 0.01ms;
    --zen-duration-slow: 0.01ms;
    --zen-duration-progress: 0.01ms;
  }
}