/* GENERATED FILE - DO NOT EDIT. Generated by scripts/gen-public-tokens.cjs. */
/* ShopConnect theme tokens
   Tailwind v4 reads this file through its Vite plugin. The semantic names keep
   component CSS independent from the underlying light palette. */

:root {
  /* Typography */
  /* v5 type decision (O4): IBM Plex Sans, self-hosted in fonts.css. Inter was
     removed because it was declared here but never loaded, so the page silently
     rendered in ui-sans-serif. */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-small: 0.875rem;
  --text-fine: 0.75rem;
  --leading-body: 1.6;
  --leading-heading: 1.2;
  --leading-display: 1.1;

  /* Accent ramp: one hue, with contrast carried by lightness and chroma. */
  --color-accent-50: oklch(97% 0.02 168);
  --color-accent-100: oklch(94% 0.04 168);
  --color-accent-200: oklch(88% 0.06 168);
  --color-accent-300: oklch(78% 0.08 168);
  --color-accent-400: oklch(68% 0.10 168);
  --color-accent-500: oklch(58% 0.10 168);
  --color-accent-600: oklch(50% 0.10 168);
  --color-accent-700: oklch(42% 0.10 168);
  --color-accent-800: oklch(32% 0.08 168);
  --color-accent-900: oklch(24% 0.06 168);
  --color-accent-950: oklch(16% 0.04 168);
  --color-accent: oklch(58% 0.10 168);
  --color-accent-deep: oklch(42% 0.10 168);
  --color-accent-soft: oklch(94% 0.04 168);
  --color-accent-glow: oklch(75% 0.09 168);

  /* Product-aligned emerald semantics. */
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  /* Money text sits on white, soft and tint, so it is one step darker than
     emerald-600, which clears AA on none of them (3.77 / 3.56 / 3.41).
     This value measures 5.48 / 5.18 / 4.96. */
  --color-money: #047857;

  /* One coherent light semantic surface. */
  --color-ink: #0a1f1a;
  --color-ink-muted: #2a3d37;
  --color-ink-subtle: #5b6b66;
  --color-ink-faint: #8a958f;
  --color-surface: #ffffff;
  --color-surface-soft: #f6f9f8;
  --color-surface-tint: #eef5f2;
  --color-surface-accent: oklch(94% 0.04 168);
  --color-surface-dark: #0a1f1a;
  --color-ink-on-dark: #f6f9f8;
  --color-border: #e6ece9;
  --color-border-strong: #d8e1dd;
  --color-border-accent: oklch(68% 0.10 168);
  --color-focus: oklch(58% 0.10 168);

  /* Layered neutral shadows plus teal depth for elevated product moments. */
  --shadow-xs: 0 1px 2px rgba(10, 31, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 31, 26, 0.04), 0 1px 3px rgba(10, 31, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 31, 26, 0.06), 0 2px 6px rgba(10, 31, 26, 0.04);
  --shadow-lg: 0 24px 48px -16px rgba(10, 31, 26, 0.12), 0 8px 24px -8px rgba(10, 31, 26, 0.08);
  --shadow-xl: 0 40px 80px -20px rgba(10, 31, 26, 0.16), 0 16px 40px -12px rgba(10, 31, 26, 0.10);
  --shadow-teal: 0 12px 30px -12px oklch(58% 0.10 168 / 0.45), 0 4px 12px -6px oklch(42% 0.10 168 / 0.22);
  --shadow-glow: 0 0 0 1px oklch(75% 0.09 168 / 0.34), 0 0 28px oklch(75% 0.09 168 / 0.24);

  /* Nested radius scale: panels, controls, then pills. */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 9999px;

  /* Layout and motion primitives used by the owned components. */
  --spacing-page-x: clamp(20px, 4vw, 56px);
  /* Gate 2.5b decision 8: sections read as distinct blocks when the space
     BETWEEN them is larger than any space inside them. Section padding went up;
     the intra-section gaps below are a fixed 4px-based rhythm so no component
     invents its own value. Every margin inside a section now resolves to one of
     these six steps. */
  --spacing-section-y: clamp(64px, 8vw, 112px);
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  /* The gap between a section's head block (eyebrow + title + lead) and the
     content it introduces. One value, used by every section. */
  --spacing-head-gap: clamp(36px, 4.4vw, 56px);
  --spacing-container: 1200px;
  --spacing-nav-utility-height: 32px;
  --spacing-nav-height: 68px;
  --spacing-site-header-height: calc(var(--spacing-nav-height) + var(--spacing-nav-utility-height) + 1px);
  --spacing-control-min: 44px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-reveal: 600ms;
}