/* ============================================================
   TYPOGRAPHY
   ------------------------------------------------------------
   Three families of text roles. A role sets size, weight, leading
   and tracking together — a component never assembles those by
   hand.

     TITLES   .ice-h1 … .ice-h7       30 27 24 21 18 16 14
     BODY     .ice-body-l/m/s/xs      16 14 12 11
     CAPS     .ice-caps-l/m/s         14 12 10   uppercase, tracked

   One class per Figma text style, Figma 66:1464. Each one quotes
   --type-<style>-size / -leading / -track; no number is written
   here and no property is picked one at a time. Weight is a
   separate axis — .ice-regular / .ice-medium / .ice-semibold.

   Two typefaces, one file. Today --font-title and --font-body are
   the same family; pointing one of them elsewhere in tokens/_type
   .css re-typesets the whole product without touching a component.

   Colour: titles carry theirs, because they sit over photography
   and need the legibility shadow with it. Body and caps inherit,
   so a surface or an emphasis class (.ice-emph-low) decides.
   ============================================================ */

body {
  font-family: var(--font-body);
  font-variation-settings: var(--font-variation);
  font-weight: var(--weight-regular);
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-leading);
  letter-spacing: var(--type-body-m-track);
  color: var(--fg-medium);
}

/* ------------------------------------------------------------
   TITLES
   Sizes are fixed. Where a screen wants a smaller title on mobile
   it uses the rung below, in its own layout file — the scale
   itself does not move under you.
   ------------------------------------------------------------ */
.ice-h1, .ice-h2, .ice-h3, .ice-h4, .ice-h5, .ice-h6, .ice-h7 {
  font-family: var(--font-title);
  font-weight: var(--weight-medium);
  color: var(--fg-high);
  text-shadow: var(--text-shadow-legible);
}

.ice-h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-leading); letter-spacing: var(--type-h1-track); }
.ice-h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-leading); letter-spacing: var(--type-h2-track); }
.ice-h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-leading); letter-spacing: var(--type-h3-track); }
.ice-h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-leading); letter-spacing: var(--type-h4-track); }
.ice-h5 { font-size: var(--type-h5-size); line-height: var(--type-h5-leading); letter-spacing: var(--type-h5-track); }
.ice-h6 { font-size: var(--type-h6-size); line-height: var(--type-h6-leading); letter-spacing: var(--type-h6-track); }
.ice-h7 { font-size: var(--type-h7-size); line-height: var(--type-h7-leading); letter-spacing: var(--type-h7-track); }

/* ------------------------------------------------------------
   BODY
   ------------------------------------------------------------ */
.ice-body-l, .ice-body-m, .ice-body-s, .ice-body-xs {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
}

.ice-body-l { font-size: var(--type-body-l-size); line-height: var(--type-body-l-leading); letter-spacing: var(--type-body-l-track); }
.ice-body-m { font-size: var(--type-body-m-size); line-height: var(--type-body-m-leading); letter-spacing: var(--type-body-m-track); }
.ice-body-s { font-size: var(--type-body-s-size); line-height: var(--type-body-s-leading); letter-spacing: var(--type-body-s-track); }
.ice-body-xs { font-size: var(--type-body-xs-size); line-height: var(--type-body-xs-leading); letter-spacing: var(--type-body-xs-track); }

/* ------------------------------------------------------------
   CAPS
   Small, uppercase, widely tracked. The signature of the design.
   Used on category chips, the VU badge, meter labels and section
   overlines — which is why the name describes the form rather
   than any one of those four jobs.
   ------------------------------------------------------------ */
.ice-caps-l, .ice-caps-m, .ice-caps-s {
  font-family: var(--font-title);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.ice-caps-l { font-size: var(--type-caps-l-size); line-height: var(--type-caps-l-leading); letter-spacing: var(--type-caps-l-track); }
.ice-caps-m { font-size: var(--type-caps-m-size); line-height: var(--type-caps-m-leading); letter-spacing: var(--type-caps-m-track); }
.ice-caps-s { font-size: var(--type-caps-s-size); line-height: var(--type-caps-s-leading); letter-spacing: var(--type-caps-s-track); }

/* ------------------------------------------------------------
   WEIGHT MODIFIERS
   Any role can be pushed a step either way without leaving it.
   ------------------------------------------------------------ */
.ice-regular  { font-weight: var(--weight-regular); }
.ice-medium   { font-weight: var(--weight-medium); }
.ice-semibold { font-weight: var(--weight-semibold); }

/* ------------------------------------------------------------
   LINK
   ------------------------------------------------------------
   Three variants, one recipe. All three carry a dashed rule that
   firms up to currentColor on hover; what differs is how loudly
   they announce themselves at rest.

     accent   (default)  coloured, rule visible   — the usual link
     subtle              inherits its colour, rule visible
     stealth             reads as plain text until hovered

   Use stealth where a link would otherwise pepper a sentence —
   a source name, an entity inside a headline.
   ------------------------------------------------------------ */
.ice-link {
  color: var(--fg-link);
  cursor: pointer;
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

/* Variants first, hover last: they carry the same specificity, so
   whichever is declared later wins. Put them the other way round and
   `color: inherit` beats the hover colour — subtle and stealth then
   never reveal themselves, which is the whole point of them. */
.ice-link[data-variant="subtle"]  { color: inherit; }
.ice-link[data-variant="stealth"] { color: inherit; text-decoration-color: transparent; }

/* All three land on the same warm gold. Hovered, they are links —
   the variant only decides how quiet they are at rest. */
.ice-link:hover {
  color: var(--fg-link-hover);
  text-decoration-color: currentColor;
}

/* In a title the rule needs room and weight, or it collides with
   the descenders and disappears against the type. */
.ice-h1 .ice-link, .ice-h2 .ice-link, .ice-h3 .ice-link {
  text-underline-offset: var(--space-6);
  text-decoration-thickness: 2px;
}
.ice-h4 .ice-link, .ice-h5 .ice-link {
  text-underline-offset: var(--space-4);
  text-decoration-thickness: 2px;
}

/* An icon inside a link is not underlined and sits back a little.
   .ice-icon is display:block by default — left alone it would break
   the line inside an inline link, so it goes back inline here and is
   nudged onto the text baseline. */
.ice-link .ice-icon {
  display: inline-block;
  vertical-align: -0.15em;
  margin-inline-end: var(--space-4);
  text-decoration: none;
  opacity: .5;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.ice-link:hover .ice-icon { opacity: 1; }

/* Source links sit next to a small chain icon. */
.ice-link--source {
  font-size: var(--type-body-m-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--type-body-m-track);
  text-shadow: var(--text-shadow-legible);
}

/* ------------------------------------------------------------
   EMPHASIS — Figma 89:19649
   ------------------------------------------------------------
   Three levels, and each sets TWO colours: an icon is never the
   same colour as the text beside it. Set the level once on the
   block and the icons inside follow — that pairing is the whole
   point of the class, and it is why there are no separate icon
   utilities to forget.

   Emphasis is orthogonal to everything else. It says nothing
   about size, weight or link state, and none of those say
   anything about it.
   ------------------------------------------------------------ */
.ice-emph-high   { color: var(--fg-high); }
.ice-emph-medium { color: var(--fg-medium); }
.ice-emph-low    { color: var(--fg-low); }

.ice-emph-high   .ice-icon { color: var(--fg-icon-high); }
.ice-emph-medium .ice-icon { color: var(--fg-icon-medium); }
.ice-emph-low    .ice-icon { color: var(--fg-icon-low); }