@layer occ.theme {
  :where([data-brand="occ"]) {
    color: var(--occ-fg);
    background: var(--occ-bg);
    font-family: var(--occ-font-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  :where([data-brand="occ"]) ::selection {
    color: var(--occ-fg);
    background: rgb(201 169 107 / .30);
  }

  .occ-container {
    width: min(calc(100% - (2 * var(--occ-page-gutter))), var(--occ-container-max));
    margin-inline: auto;
  }

  .occ-section {
    padding-block: var(--occ-section-space);
  }

  .occ-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: var(--occ-grid-gap);
  }

  .occ-display,
  .occ-heading {
    margin: 0;
    font-family: var(--occ-font-display);
    font-weight: var(--occ-fw-regular);
    letter-spacing: var(--occ-tracking-tight);
    text-wrap: balance;
  }

  .occ-display {
    font-size: clamp(var(--occ-text-4xl),7vw,var(--occ-text-7xl));
    line-height: var(--occ-leading-tight);
  }

  .occ-heading {
    font-size: clamp(var(--occ-text-3xl),4vw,var(--occ-text-5xl));
    line-height: var(--occ-leading-heading);
  }

  .occ-eyebrow {
    color: var(--occ-accent-deep);
    font-size: var(--occ-text-xs);
    font-weight: var(--occ-fw-semibold);
    letter-spacing: var(--occ-tracking-caps);
    line-height: var(--occ-leading-ui);
    text-transform: uppercase;
  }

  [data-theme="dark"] .occ-eyebrow {
    color: var(--occ-accent);
  }

  .occ-body {
    max-width: 68ch;
    color: var(--occ-fg-muted);
    font-size: var(--occ-text-md);
    line-height: var(--occ-leading-body);
  }

  .occ-panel {
    border: 1px solid var(--occ-border);
    border-radius: var(--occ-radius-lg);
    background: var(--occ-surface);
  }

  .occ-panel--raised {
    background: var(--occ-surface-raised);
    box-shadow: var(--occ-shadow-sm);
  }

  .occ-metallic-text {
    color: transparent;
    background: var(--occ-metallic-gradient);
    background-clip: text;
    -webkit-background-clip: text;
  }

  .occ-divider {
    width: 100%;
    height: 1px;
    background: var(--occ-border);
  }

  @media (max-width: 52rem) {
    .occ-grid-12 { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}