/* Polin Shook brand layer — the firm's public identity, as `www.polinshook.com`
   presents it, expressed over Navigator's shared `--nav-*` token layer.
   `theme.css` loads first and keeps owning the chrome; every rule here is
   additive, so a page that does not hoist this file renders exactly as before.

   Two things live here and nowhere else:
     1. the section furniture the marketing pages share (eyebrow, heading,
        card, chip, stat),
     2. the two motion primitives — the hero glow and the co-counsel pop.

   The palette does NOT live here. `--fiat-brand` aliases `--nav-color-primary`,
   which `tokens.css` now sets to the firm's brown in both schemes — so the
   marketing pages and the product chrome cannot drift to two different browns,
   and re-toning the firm is one edit in the token layer.

   Page-specific layout belongs in the page's own stylesheet (`home.css`,
   `team.css`), which loads after this one. */

:root {
  --fiat-brand: var(--nav-color-primary);
  --fiat-brand-strong: var(--nav-color-primary-hover);
  /* Text on a brand-filled surface — inverts with the scheme, like the fill. */
  --fiat-on-brand: var(--nav-color-on-brand);

  /* Washes derived from the fill: a tint behind an icon, an edge on a card, a
     glow behind the hero. `color-mix` keeps them tied to the one brand stop
     rather than restating it at three opacities. */
  --fiat-brand-tint: color-mix(in oklab, var(--nav-color-primary) 7%, transparent);
  --fiat-brand-edge: color-mix(in oklab, var(--nav-color-primary) 28%, transparent);
  --fiat-brand-glow: color-mix(in oklab, var(--nav-color-primary) 34%, transparent);

  /* The display face. `theme.css` names GORP Serif in `--nav-font-family` for
     the product chrome; the marketing headings are set in the firm's serif and
     fall back through the same stack. */
  --fiat-serif: "Source Serif 4", "GORP Serif", Georgia, "Times New Roman", serif;

  --fiat-card-bg: color-mix(in oklab, var(--nav-color-surface) 88%, transparent);
  --fiat-card-border: var(--fiat-brand-edge);
  --fiat-card-radius: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The fill lightens with the scheme, so the washes drawn from it thin out;
       these hold them visible against the dark ground. */
    --fiat-brand-tint: color-mix(in oklab, var(--nav-color-primary) 9%, transparent);
    --fiat-brand-edge: color-mix(in oklab, var(--nav-color-primary) 24%, transparent);
    --fiat-brand-glow: color-mix(in oklab, var(--nav-color-primary) 26%, transparent);
    --fiat-card-bg: color-mix(in oklab, var(--nav-color-surface-raised) 70%, transparent);
  }
}

/* ---- Section furniture ------------------------------------------------- */

/* The small tracked-out label above a heading ("The practice", "The people").
   It names the section without competing with the heading for the eye. */
.fiat-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--fiat-brand);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.fiat-heading {
  margin: 0;
  font-family: var(--fiat-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  text-wrap: balance;
}

/* The glass panel every marketing block sits in. A gradient rather than a flat
   fill so the card reads as lifted on both colour schemes. */
.fiat-card {
  box-sizing: border-box;
  margin: 1.5rem 0 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--fiat-card-border);
  border-radius: var(--fiat-card-radius);
  background-image: linear-gradient(
    to bottom,
    var(--fiat-card-bg),
    color-mix(in oklab, var(--fiat-card-bg) 45%, transparent)
  );
}

/* The pill row: practice areas on the home page, credentials on `/team`. */
.fiat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fiat-chip {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--fiat-brand-edge);
  border-radius: 999px;
  background: var(--fiat-brand-tint);
  color: var(--nav-color-text);
  font-size: 0.875rem;
  line-height: 1.3;
}

/* ---- Motion ------------------------------------------------------------ */

/* The hero glow: two soft radial washes bled behind the statement. Painted on
   one decorative element so no content node carries a background. */
.fiat-glow {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 0;
  height: 26rem;
  pointer-events: none;
  background:
    radial-gradient(
      58% 60% at 50% 0%,
      var(--fiat-brand-glow) 0%,
      transparent 66%
    ),
    radial-gradient(
      36% 44% at 50% 4%,
      color-mix(in oklab, var(--fiat-brand) 26%, transparent) 0%,
      transparent 62%
    );
  animation: fiat-glow-breathe 12s ease-in-out infinite;
}

@keyframes fiat-glow-breathe {
  0%,
  100% {
    opacity: 0.7;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-0.5rem) scale(1.06);
  }
}

/* Motion is decoration here, never information: with it suppressed the glow
   simply settles, so nothing is lost. */
@media (prefers-reduced-motion: reduce) {
  .fiat-glow {
    opacity: 0.8;
    animation: none;
  }
}