/* Type roles: spec §2 "Typography" table, one class per row.
   Each role fixes font, size, line-height, tracking and case; colour comes from
   the surface context (--ca-*, see base.css). Case is applied with
   text-transform, so write the copy in normal sentence case in the HTML. */
@layer components {
  .type-hero {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-hero);
    line-height: calc(56 / 52); /* 56px at the 52px desktop size */
    text-transform: uppercase;
    color: var(--ca-heading);
  }

  .type-script {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: var(--fs-script);
    line-height: 1.1;
    color: var(--ca-script);
  }

  .type-lead {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--fs-lead);
    line-height: 1.2;
    color: var(--ca-heading);
  }

  .type-section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-section-title);
    line-height: 1.2;
    letter-spacing: var(--ls-title);
    text-transform: uppercase;
    color: var(--ca-heading);
  }

  /* Story / gift headings */
  .type-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 1.12;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ca-heading);
  }

  .type-card-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-card-title);
    line-height: 1.12;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ca-heading);
  }

  .type-ig-heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-card-title);
    line-height: 1.2;
    letter-spacing: var(--ls-title);
    text-transform: uppercase;
    color: var(--ca-heading);
  }

  .type-quote {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--fs-quote);
    line-height: 1.2;
    color: var(--ca-heading);
  }

  .type-nav {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-nav);
    line-height: 1;
    letter-spacing: var(--ls-nav);
    text-transform: uppercase;
    color: var(--ca-heading);
  }

  .type-eyebrow {
    font-family: var(--font-label);
    font-weight: 400;
    font-size: var(--fs-eyebrow);
    line-height: 1.2;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ca-eyebrow);
  }

  /* Brand-promise and ingredient titles */
  .type-label {
    font-family: var(--font-label);
    font-weight: 400;
    font-size: var(--fs-label);
    line-height: 1.35;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--ca-label);
  }

  /* "Stay updated" */
  .type-label-lg {
    font-family: var(--font-label);
    font-weight: 400;
    font-size: var(--fs-label-lg);
    line-height: 1.2;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--ca-accent);
  }

  /* Footer column headings, Instagram handle */
  .type-micro {
    font-family: var(--font-label);
    font-weight: 400;
    font-size: var(--fs-micro);
    line-height: 1.2;
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
    color: var(--ca-micro);
  }

  .type-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--ca-body);
  }

  /* Footer links, copyright */
  .type-small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-small);
    line-height: 1.45;
    color: var(--ca-muted);
  }

  /* Card descriptors, top-bar badges */
  .type-caption {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-caption);
    line-height: 1.4;
    color: var(--ca-muted);
  }
}