/* JW Trade — Hernest-inspired commerce editorial: warm white, calm ink, natural product tiles, and restrained B2B polish. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=DM+Sans:ital,opsz@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap");

:root {
  --color-primary: oklch(0.31 0.035 155);
  --color-primary-strong: oklch(0.22 0.03 155);
  --color-primary-muted: oklch(0.45 0.04 155);
  --color-primary-soft: oklch(0.94 0.018 112);

  --color-accent: oklch(0.72 0.07 77);
  --color-accent-hover: oklch(0.61 0.075 72);
  --color-accent-faint: oklch(0.95 0.026 82);
  --color-lacquer: oklch(0.43 0.08 32);
  --color-lacquer-soft: oklch(0.95 0.024 42);

  --color-bg: oklch(0.982 0.008 92);
  --color-bg-elevated: oklch(0.996 0.005 96);
  --color-surface: oklch(0.998 0.004 96);
  --color-surface-warm: oklch(0.95 0.014 82);
  --color-border: oklch(0.88 0.012 84);
  --color-border-strong: oklch(0.78 0.018 80);

  --color-text: oklch(0.2 0.018 150);
  --color-text-muted: oklch(0.38 0.016 150);
  --color-text-subtle: oklch(0.5 0.014 150);
  --color-text-inverse: oklch(0.99 0.005 100);

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.45rem;
  --text-2xl: clamp(1.5rem, 1.1rem + 1.2vw, 1.9rem);
  --text-3xl: clamp(1.85rem, 1.2rem + 1.8vw, 2.65rem);
  --text-4xl: clamp(2.35rem, 1.3rem + 2.6vw, 3.55rem);
  --text-hero: clamp(2.6rem, 1.15rem + 5vw, 6.6rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --space-3xl: clamp(3.5rem, 2.5rem + 3vw, 5rem);

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px color-mix(in oklab, var(--color-primary-strong) 6%, transparent);
  --shadow-sm: 0 0.2rem 0.5rem color-mix(in oklab, var(--color-primary-strong) 7%, transparent),
    0 0.1rem 0.15rem color-mix(in oklab, var(--color-primary-strong) 4%, transparent);
  --shadow-md: 0 0.4rem 1.2rem color-mix(in oklab, var(--color-primary-strong) 9%, transparent),
    0 0.2rem 0.4rem color-mix(in oklab, var(--color-primary-strong) 5%, transparent);
  --shadow-lg: 0 1rem 2.5rem color-mix(in oklab, var(--color-primary-strong) 14%, transparent);
  --shadow-3d: 0 1.4rem 0 color-mix(in oklab, var(--color-primary-strong) 7%, transparent),
    0 2rem 3.5rem color-mix(in oklab, var(--color-primary-strong) 16%, transparent);
  --shadow-inset: inset 0 1px 0 color-mix(in oklab, #fff 70%, transparent);

  --line-tight: 1.12;
  --line-snug: 1.28;
  --line-base: 1.58;

  --ease-standard: 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: 400ms cubic-bezier(0.22, 1, 0.36, 1);

  --z-sticky: 100;
  --z-overlay: 1000;
}