/* tokens.css — design tokens from SHEINBERG_STUDIO_WEBSITE_STYLE_GUIDE_FOR_CLAUDE.md
   §4.5 colors, §5.3 fonts, §6.4 spacing.
   These variable names are intentionally stable — Phase 1 (Next.js) reuses them verbatim. */

:root {
  /* Color — primary */
  --color-bg: #E9E7E2;
  --color-surface: #F7F6F2;
  --color-ink: #050505;
  --color-charcoal: #252525;
  --color-muted: #777777;
  --color-fog: #999999;
  --color-line: #D6D3CD;
  --color-white: #FFFFFF;

  /* Color — accents */
  --color-blue: #2F6BFF;
  --color-blue-soft: #D9E4FF;
  --color-blue-hover: #5A88FF;

  --color-orange: #FF6B2F;
  --color-orange-soft: #FFE1D4;

  --color-violet: #7A4DFF;
  --color-violet-soft: #E7DEFF;

  --color-green-soft: #DDEDDC;
  --color-warm-shadow: #B7B2A8;

  /* Typography */
  --font-display: "Inter Display", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;

  /* Type scale (clamp-based, mobile → desktop) */
  --fs-display-xxl: clamp(5rem, 15vw, 13rem);
  --fs-display-xl:  clamp(4rem, 11vw, 9rem);
  --fs-display-lg:  clamp(3rem, 8vw, 6.5rem);
  --fs-heading-xl:  clamp(2.5rem, 5vw, 4.5rem);
  --fs-heading-lg:  clamp(2rem, 4vw, 3.25rem);
  --fs-heading-md:  clamp(1.5rem, 3vw, 2rem);
  --fs-body-xl:     clamp(1.35rem, 2.4vw, 2rem);
  --fs-body-lg:     1.25rem;
  --fs-body-md:     1rem;
  --fs-ui-sm:       0.875rem;
  --fs-caption:     0.75rem;

  /* Line height */
  --lh-display-tight: 0.82;
  --lh-display:       0.92;
  --lh-heading:       1.05;
  --lh-body:          1.55;
  --lh-ui:            1.35;

  /* Letter spacing */
  --ls-display: -0.045em;
  --ls-heading: -0.025em;
  --ls-body:    0;
  --ls-caption: 0.04em;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --space-page: clamp(1.25rem, 4vw, 3rem);

  /* Layout */
  --max-width: 1440px;
  --grid-gap: clamp(16px, 2vw, 28px);

  /* Radius / borders */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --border: 1px solid var(--color-line);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* Z layers */
  --z-nav: 50;
  --z-modal: 80;
  --z-toast: 90;
}