/* Fortune — Typography foundations
   Fonts: Fortune's licensed Graphik, Graphik Compact and Graphik Condensed (Commercial Type)
   are now included as webfonts — see tokens/fonts.css (@font-face). Inria Serif is the
   editorial body face (Google Fonts). */

@import url("./fonts.css");
@import url("https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap");

:root {
  /* Families */
  --font-graphik: "Graphik", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-graphik-compact: "Graphik Compact", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-graphik-condensed: "Graphik Condensed", "Graphik Compact", "Helvetica Neue", Arial, sans-serif;
  --font-inria-serif: "Inria Serif", Georgia, "Times New Roman", serif;

  /* Aliases used across the app */
  --font-ui: var(--font-graphik);
  --font-heading: var(--font-graphik-compact);
  --font-condensed: var(--font-graphik-condensed);
  --font-editorial: var(--font-inria-serif);

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

  /* Letter spacing */
  --tracking-none: 0px;
  --tracking-normal: 0.5px;
  --tracking-wide: 1.17px;
  --tracking-wider: 2px;

  /* Type scale (desktop / xl values; sizes step down responsively in production).
     Format: --type-<name>: <size> / <line-height>. */
  --type-xxl-size: 6rem;      --type-xxl-lh: 110%;
  --type-xl-size: 3.75rem;    --type-xl-lh: 120%;
  --type-lg-size: 3rem;       --type-lg-lh: 120%;
  --type-level-1-size: 2.5rem;  --type-level-1-lh: 120%;
  --type-level-2-size: 2rem;    --type-level-2-lh: 120%;
  --type-level-3-size: 1.75rem; --type-level-3-lh: 130%;
  --type-level-4-size: 1.5rem;  --type-level-4-lh: 130%;
  --type-level-5-size: 1.25rem; --type-level-5-lh: 130%;
  --type-level-6-size: 1.125rem; --type-level-6-lh: 140%;
  --type-default-size: 1rem;    --type-default-lh: 140%;
  --type-sm-size: 0.875rem;     --type-sm-lh: 140%;
  --type-xs-size: 0.75rem;      --type-xs-lh: 140%;
  --type-xxs-size: 0.625rem;    --type-xxs-lh: 150%;
}

/* Convenience utility classes mirroring the app's typography-* utilities. */
.typography-xxl { font-size: var(--type-xxl-size); line-height: var(--type-xxl-lh); }
.typography-xl { font-size: var(--type-xl-size); line-height: var(--type-xl-lh); }
.typography-lg { font-size: var(--type-lg-size); line-height: var(--type-lg-lh); }
.typography-level-1 { font-size: var(--type-level-1-size); line-height: var(--type-level-1-lh); }
.typography-level-2 { font-size: var(--type-level-2-size); line-height: var(--type-level-2-lh); }
.typography-level-3 { font-size: var(--type-level-3-size); line-height: var(--type-level-3-lh); }
.typography-level-4 { font-size: var(--type-level-4-size); line-height: var(--type-level-4-lh); }
.typography-level-5 { font-size: var(--type-level-5-size); line-height: var(--type-level-5-lh); }
.typography-level-6 { font-size: var(--type-level-6-size); line-height: var(--type-level-6-lh); }
.typography-default { font-size: var(--type-default-size); line-height: var(--type-default-lh); }
.typography-sm { font-size: var(--type-sm-size); line-height: var(--type-sm-lh); }
.typography-xs { font-size: var(--type-xs-size); line-height: var(--type-xs-lh); }
.typography-xxs { font-size: var(--type-xxs-size); line-height: var(--type-xxs-lh); }

.font-graphik { font-family: var(--font-graphik); }
.font-graphik-compact { font-family: var(--font-graphik-compact); }
.font-graphik-condensed { font-family: var(--font-graphik-condensed); }
.font-inria-serif { font-family: var(--font-inria-serif); }