/* ============================================================
   Japan Rabbit — Typography tokens
   Brand font: Proxima Nova (licensed, self-hosted in /fonts via
   @font-face in tokens/fonts.css). Weight range 100–900 + italics.
   ============================================================ */

:root {
  /* Families — Proxima Nova first, then system sans fallback */
  --font-sans: "Proxima Nova", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, "Noto Sans", sans-serif;
  --font-body: var(--font-sans);
  --font-handwriting: "Caveat", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;

  /* Type scale — Tailwind-aligned (app uses text-base = 1rem root) */
  --text-xxs: 0.65rem;   /* 10.4px — badges */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px — buttons, dense */
  --text-base: 1rem;     /* 16px — body */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px — h4 / feature heading */
  --text-2xl: 1.5rem;    /* 24px — h3 */
  --text-3xl: 1.875rem;  /* 30px — h2 */
  --text-4xl: 2.25rem;   /* 36px — h1 */
  --text-hero: 2.5rem;   /* 40px — Style Guide hero */

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.25;   /* Style Guide H1 */
  --leading-snug: 1.4;
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.75; /* Style Guide subheading */

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;   /* buttons: uppercase + tracking-wider */

  /* ---- Semantic roles (from Style Guide "Styles") ---------- */
  /* Hero / H1 — "Anyone, anywhere can buy from Japan." */
  --role-hero-size: var(--text-hero);
  --role-hero-weight: var(--weight-bold);
  --role-hero-leading: var(--leading-tight);

  /* Subheading / feature heading — "Communicate with Sellers" */
  --role-subheading-size: var(--text-xl);
  --role-subheading-weight: var(--weight-bold);
  --role-subheading-leading: var(--leading-relaxed);

  /* Home page copy / body */
  --role-body-size: 1.03rem; /* ~16.5px */
  --role-body-weight: var(--weight-regular);
  --role-body-leading: var(--leading-normal);
}