Typography

/* Stack: browser picks first available */
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

/* Generic families */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: math;
font-family: emoji;

@font-face {
  font-family: "Inter";
  src:
    url("/fonts/Inter.woff2") format("woff2"),
    url("/fonts/Inter.woff") format("woff");
  font-weight: 100 900;          /* variable font range */
  font-style: normal;
  font-display: swap;            /* show fallback while loading */
  unicode-range: U+0000-00FF;    /* subset */
}

/* font-display values */
font-display: auto;     /* browser decides */
font-display: block;    /* invisible text while loading */
font-display: swap;     /* fallback until loaded */
font-display: fallback; /* brief block, then swap, no swap after 3s */
font-display: optional; /* use cached only */

font-size: 1rem;           /* relative to root */
font-size: 1.25em;         /* relative to parent */
font-size: 16px;           /* absolute */
font-size: 120%;
font-size: clamp(1rem, 2.5vw, 2rem); /* fluid */

/* Named sizes */
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large;
font-size: smaller;        /* relative to parent — one step smaller */
font-size: larger;

font-weight: 400;    /* normal */
font-weight: 700;    /* bold */
font-weight: normal; /* = 400 */
font-weight: bold;   /* = 700 */
font-weight: lighter;/* relative to parent, one step lighter */
font-weight: bolder;

/* Full numeric range (100–900) */
font-weight: 100;    /* thin */
font-weight: 200;    /* extra light */
font-weight: 300;    /* light */
font-weight: 400;    /* regular */
font-weight: 500;    /* medium */
font-weight: 600;    /* semibold */
font-weight: 700;    /* bold */
font-weight: 800;    /* extrabold */
font-weight: 900;    /* black */

/* Variable font: any value in range */
font-weight: 350;

font-style: normal;
font-style: italic;
font-style: oblique;        /* synthetic slant */
font-style: oblique 30deg; /* variable font angle */

font-variant: normal;
font-variant: small-caps;

/* Longhand features */
font-variant-caps: small-caps | all-small-caps | petite-caps | unicase | titling-caps;
font-variant-numeric: ordinal | slashed-zero | lining-nums | oldstyle-nums
                    | proportional-nums | tabular-nums | diagonal-fractions
                    | stacked-fractions;
font-variant-ligatures: common-ligatures | no-common-ligatures | discretionary-ligatures
                      | historical-ligatures | contextual;
font-variant-alternates: stylistic(alt1) | swash(name) | styleset(ss01, ss02);
font-variant-east-asian: jis78 | jis83 | jis90 | jis04 | simplified | traditional
                        | full-width | proportional-width | ruby;
font-variant-position: sub | super;

font-stretch: normal;
font-stretch: condensed;
font-stretch: expanded;
font-stretch: 75%;             /* variable font percentage */
font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed
            | normal | semi-expanded | expanded | extra-expanded | ultra-expanded;

/* style variant weight stretch size/line-height family */
font: italic small-caps bold 1.2rem/1.5 "Inter", sans-serif;

/* Keyword values */
font: caption;
font: icon;
font: menu;
font: message-box;
font: small-caption;
font: status-bar;

line-height: 1.5;       /* unitless multiplier — preferred */
line-height: 24px;
line-height: 150%;
line-height: 1.5em;
line-height: normal;    /* browser default (~1.2) */

letter-spacing: 0.05em;
letter-spacing: 2px;
letter-spacing: normal;
letter-spacing: -0.02em; /* tight tracking */

word-spacing: 0.1em;
word-spacing: 4px;
word-spacing: normal;

text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: start;   /* writing-mode aware (= left in LTR) */
text-align: end;
text-align: match-parent;

/* Shorthand */
text-decoration: underline;
text-decoration: line-through red 2px;
text-decoration: underline dashed blue 1px;
text-decoration: none;

/* Longhand */
text-decoration-line: underline | overline | line-through | blink | none;
text-decoration-style: solid | double | dotted | dashed | wavy;
text-decoration-color: red;
text-decoration-thickness: 2px | from-font | auto;
text-underline-offset: 3px;
text-underline-position: auto | from-font | under | left | right;

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;   /* first letter of each word */
text-transform: none;
text-transform: full-width;
text-transform: math-auto;

text-indent: 2em;
text-indent: 40px;
text-indent: -2em;      /* hanging indent */
text-indent: 2em hanging each-line; /* CSS Text 4 */

/* requires: overflow: hidden; white-space: nowrap; */
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;   /* … */
  text-overflow: clip;
  text-overflow: "—";        /* custom string (limited support) */
}

.code { white-space: pre-wrap; }
.label { white-space: nowrap; }
/* CSS Text 4 shorthand */
white-space: collapse preserve nowrap;

word-break: normal;
word-break: break-all;   /* break anywhere */
word-break: keep-all;    /* no break in CJK */
word-break: break-word;  /* same as overflow-wrap: anywhere */

overflow-wrap: normal;
overflow-wrap: break-word;  /* break long words to avoid overflow */
overflow-wrap: anywhere;    /* like break-word but affects min-content */

p {
  hyphens: none;
  hyphens: manual;   /* only break at ­ */
  hyphens: auto;     /* browser adds hyphens */
  hyphenate-character: "‐";       /* CSS Text 4 */
  hyphenate-limit-chars: 6 3 3;  /* word min-before min-after */
}
/* requires lang attribute on element or ancestor */

vertical-align: baseline;   /* default */
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: super;
vertical-align: sub;
vertical-align: 4px;        /* offset from baseline */
vertical-align: -10%;

/* offset-x  offset-y  blur-radius  color */
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
text-shadow: 0 0 8px #ff0;               /* glow */
text-shadow: none;

/* Multiple shadows */
text-shadow:
  1px 1px 0 #fff,
  2px 2px 0 #999;

/* OpenType features */
font-feature-settings: "kern" 1;
font-feature-settings: "liga" 1, "calt" 1;
font-feature-settings: "tnum" 1;   /* tabular numbers */
font-feature-settings: "frac" 1;   /* diagonal fractions */
font-feature-settings: "smcp" 1;   /* small caps */
font-feature-settings: "ss01" 1;   /* stylistic set 1 */

/* Variable font axes */
font-variation-settings: "wght" 350, "wdth" 87.5;
font-variation-settings: "opsz" 18;  /* optical size */

writing-mode: horizontal-tb;  /* default — left to right, top to bottom */
writing-mode: vertical-rl;    /* right to left, top to bottom (Japanese) */
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;

text-orientation: mixed;   /* default */
text-orientation: upright; /* each character upright in vertical text */
text-orientation: sideways;

direction: ltr;
direction: rtl;
unicode-bidi: bidi-override;

tab-size: 4;    /* tab character width in spaces */
tab-size: 2;
tab-size: 8px;

body {
  -webkit-font-smoothing: antialiased;   /* macOS/iOS: subpixel off */
  -moz-osx-font-smoothing: grayscale;   /* Firefox macOS */
}

@font-palette-values --brand-palette {
  font-family: "Bungee Color";
  override-colors: 0 #ff0, 1 #f0f;
}
.colored-text {
  font-palette: --brand-palette;
}

:root {
  --text-sm:   clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem,     0.9rem + 0.5vw,   1.25rem);
  --text-lg:   clamp(1.125rem, 1rem   + 0.625vw, 1.5rem);
  --text-xl:   clamp(1.25rem,  1rem   + 1.25vw,  2rem);
  --text-2xl:  clamp(1.5rem,   1.1rem + 2vw,     3rem);
}