/* ==========================================================================
   Chemesis Core — Design Tokens
   Extracted 1:1 from the approved Vercel prototype (src/app/globals.css).
   Single source of truth for CSS custom properties used by all later stages.
   V2 (Phase 1): typography roles, spacing and control tokens aligned with the
   approved Design V2 system (17px body, readable label/meta tiers, 51/44px
   controls, V2 fluid clamps).
   ========================================================================== */

:root {
  /* Colors — ink */
  --ch-ink-950: #01061a;
  --ch-ink-900: #000c30;
  --ch-ink-800: #001340;
  --ch-ink-700: #03194d;
  --ch-ink-600: #072364;

  /* Colors — blue */
  --ch-blue-700: #0039b8;
  --ch-blue-600: #0043d1;
  --ch-blue: #0054fc;
  --ch-blue-400: #2f76ff;
  --ch-blue-300: #7aa5ff;
  --ch-blue-200: #b7cdff;
  --ch-blue-100: #e4ecff;

  /* Colors — neutrals */
  --ch-paper: #f6f7f9;
  --ch-paper-2: #eef0f4;
  --ch-line: #e2e6ed;
  --ch-text: #0b1220;
  --ch-muted: #4b556a;
  --ch-faint: #647082;
  --ch-white: #ffffff;
  --ch-danger: #d23b3b;
  --ch-success: #1f9d55;

  /* Dark-surface helpers (prototype: white/10, white/45, blue-300 on dark) */
  --ch-dark-line: rgba(255, 255, 255, 0.1);
  --ch-dark-line-strong: rgba(255, 255, 255, 0.2);
  --ch-on-dark: rgba(255, 255, 255, 0.62);
  --ch-on-dark-muted: rgba(255, 255, 255, 0.45);
  --ch-on-dark-accent: #7aa5ff;

  /* Typography */
  --ch-font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --ch-font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --ch-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ch-font-editorial: "Newsreader", Georgia, serif;

  /* Layout */
  --ch-container: 1560px;
  --ch-container-narrow: 880px;
  --ch-gutter: clamp(20px, 4vw, 56px);
  --ch-grid-gap: 1.5rem;
  --ch-grid-gap-lg: 2.5rem;

  /* Spacing rhythm — V2 shared foundation */
  --ch-space-section: clamp(4.25rem, 6.5vw, 6.5rem); /* major section padding */
  --ch-space-section-mobile: 4rem;
  --ch-space-section-desktop: 6rem;
  --ch-space-block: clamp(2.25rem, 3.2vw, 3.25rem); /* heading → content */
  --ch-space-stack: 1.25rem; /* heading → lead */

  /* Radius */
  --ch-radius-xs: 3px;
  --ch-radius-sm: 4px;
  --ch-radius-md: 6px;
  --ch-radius-frame: 12px;

  /* Shadows (prototype: shadow-soft / shadow-lift) */
  --ch-shadow-soft: 0 16px 40px -24px rgba(0, 12, 48, 0.25);
  --ch-shadow-lift: 0 24px 60px -30px rgba(0, 12, 48, 0.35);

  /* Motion */
  --ch-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ch-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ch-dur-fast: 300ms;
  --ch-dur: 450ms;
  --ch-dur-slow: 600ms;
  --ch-dur-reveal: 900ms;

  /* Fluid type scale — V2 clamps (prototype src/app/globals.css) */
  --ch-type-display: clamp(2.75rem, 4.1vw + 1.875rem, 6.25rem);
  --ch-type-display-sm: clamp(2.25rem, 2.2vw + 1.55rem, 3.75rem);
  --ch-type-h2: clamp(1.875rem, 1.9vw + 1.35rem, 3.5rem);
  --ch-type-h3: clamp(1.375rem, 0.9vw + 1.15rem, 1.875rem);
  --ch-type-h4: clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem);
  --ch-type-product-title: clamp(1.1875rem, 0.3vw + 1.09rem, 1.3125rem);
  --ch-type-lead-lg: clamp(1.375rem, 1.2vw + 1.05rem, 1.75rem);
  --ch-type-lead: clamp(1.1875rem, 0.2vw + 1.13rem, 1.375rem);
  --ch-type-body-lg: 1.125rem;
  --ch-type-body: 1.0625rem;
  --ch-type-body-sm: 0.9375rem;
  --ch-type-price: 1.375rem;
  --ch-type-price-lg: clamp(2rem, 1.5vw + 1.5rem, 2.75rem);
  --ch-type-small: 0.9375rem;
  --ch-type-eyebrow: 0.75rem;
  --ch-type-label: 0.75rem;
  --ch-type-mono: 0.8125rem;
  --ch-type-meta: 0.8125rem;
  --ch-type-caption: 0.6875rem;

  /* Controls — V2 (51px primary, 44px small, 52px inputs, 16px input text) */
  --ch-btn-height: 3.2rem;
  --ch-btn-height-sm: 2.75rem;
  --ch-btn-padding: 1.6rem;
  --ch-btn-font: 0.9375rem;
  --ch-input-height: 3.25rem;
  --ch-input-font: 1rem;
}