[data-page="models"] {
  --color-background: hsl(200, 20%, 99%);
  --color-background-weak: hsl(200, 10%, 96%);
  --color-background-strong: hsl(200, 8%, 12%);
  --color-background-strong-hover: hsl(200, 8%, 18%);
  --color-background-interactive: hsl(172, 70%, 86%);
  --color-background-interactive-weaker: hsl(172, 55%, 94%);

  --color-text: hsl(200, 4%, 38%);
  --color-text-weak: hsl(200, 4%, 52%);
  --color-text-strong: hsl(200, 8%, 12%);
  --color-text-inverted: hsl(200, 20%, 99%);

  --color-border: hsl(200, 6%, 80%);
  --color-border-weak: hsl(200, 6%, 86%);
  --color-icon: hsl(200, 4%, 55%);

  --color-tier-economy: hsl(142, 70%, 32%);
  --color-tier-standard: hsl(210, 80%, 42%);
  --color-tier-premium: hsl(270, 60%, 45%);

  @media (prefers-color-scheme: dark) {
    --color-background: hsl(216, 16%, 7%);
    --color-background-weak: hsl(216, 12%, 10%);
    --color-background-strong: hsl(200, 12%, 94%);
    --color-background-strong-hover: hsl(200, 12%, 97%);
    --color-background-interactive: hsl(172, 55%, 85%);
    --color-background-interactive-weaker: hsl(200, 10%, 14%);

    --color-text: hsl(200, 5%, 72%);
    --color-text-weak: hsl(200, 4%, 56%);
    --color-text-strong: hsl(200, 12%, 94%);
    --color-text-inverted: hsl(216, 16%, 7%);

    --color-border: hsl(200, 5%, 25%);
    --color-border-weak: hsl(200, 4%, 18%);
    --color-icon: hsl(200, 4%, 60%);

    --color-tier-economy: hsl(142, 60%, 55%);
    --color-tier-standard: hsl(210, 85%, 65%);
    --color-tier-premium: hsl(270, 70%, 72%);
  }

  [data-component="hero"] {
    padding: 0 0 var(--vertical-padding);

    h1 {
      font-size: var(--font-size-4xl);
      font-weight: 700;
      color: var(--color-text-strong);
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    p {
      color: var(--color-text);
      max-width: 640px;
      line-height: 180%;
    }
  }

  [data-component="table"] {
    padding: 0 0 var(--vertical-padding);
    overflow-x: auto;

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;

      th {
        text-align: left;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-weak);
        padding: 12px 16px;
        border-bottom: 1px solid var(--color-border);
      }

      td {
        padding: 14px 16px;
        border-bottom: 1px solid var(--color-border-weak);
        color: var(--color-text);
        white-space: nowrap;

        span {
          color: var(--color-text-weak);
          font-size: 12px;
        }
      }

      td[data-slot="name"] {
        font-weight: 600;
        color: var(--color-text-strong);
      }

      td[data-slot="tagline"] {
        white-space: normal;
        min-width: 200px;
      }

      tbody tr:hover {
        background: var(--color-background-weak);
      }
    }

    [data-slot="tier"] {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid currentColor;

      &[data-tier="economy"] {
        color: var(--color-tier-economy);
      }
      &[data-tier="standard"] {
        color: var(--color-tier-standard);
      }
      &[data-tier="premium"] {
        color: var(--color-tier-premium);
      }
    }

    [data-slot="note"] {
      margin-top: 16px;
      font-size: 13px;
      color: var(--color-text-weak);
      max-width: 640px;
    }
  }
}