/* tokens.css */
@layer tokens, base, components;

@layer tokens {
  :root{
    /* Colors (fix) */
    --color-primary: #242426;
    --color-accent: #f5f7fa;
    --color-border: #e8e8e8;
    --color-text: #ffffff;

    /* Global font (single source of truth) */
    --font-primary: "Manrope", sans-serif;

    /* Weights */
    --fw-regular: 400;
    --fw-extrabold: 800;

    /* Type scale (fluid, calibrated to hit max at 1600px viewport) */
    /* H1: min 36px (2.25rem) → max 56px (3.5rem) */
    --fs-h1: clamp(2.25rem, calc(1.867rem + 1.633vw), 3.5rem);

    /* H2: min 24px (1.5rem) → max 30px (1.875rem) */
    --fs-h2: clamp(1.5rem, calc(1.385rem + 0.49vw), 1.875rem);

    /* Body: min 16px (1rem) → max 18px (1.125rem) */
    --fs-body: clamp(1rem, calc(0.962rem + 0.163vw), 1.125rem);

    /* Button: 15px */
    --fs-btn: 0.9375rem;

    /* Line heights (from your px ratios) */
    --lh-h1: 1.3;     /* 73/56 */
    --lh-h2: 1.27;    /* 38/30 */
    --lh-body: 1.67;  /* 30/18 */
    --lh-btn: 1.33;   /* 20/15 */
  }
}