/* estimatedroad.com theme: asphalt background, road-marking yellow and
   white. Overrides the shared tokens and adds the placeholder page. */

@layer tokens {
  :root {
    color-scheme: dark;

    --asphalt-950: #121316;
    --asphalt-800: #24262b;
    --marking-yellow: #ffd23f;
    --marking-white: #f4f4f0;
    --color-text: var(--marking-white);
    --color-text-muted: rgb(244 244 240 / 75%);
    --color-surface: var(--asphalt-950);
    --color-border: rgb(244 244 240 / 30%);
    --color-accent: var(--marking-yellow);
    --color-on-accent: var(--asphalt-950);
    --color-focus: var(--marking-yellow);
    --measure: 46rem;
  }
}

@layer components {
  .site-nav__brand {
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .wip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-8) var(--space-6);
    text-align: center;
  }

  .wip__sign {
    padding: var(--space-2) var(--space-4);
    font-weight: 800;
    color: var(--asphalt-950);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: repeating-linear-gradient(
      -45deg,
      var(--marking-yellow) 0 14px,
      #f2b705 14px 28px
    );
    border-radius: 6px;
  }

  .wip__title {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    line-height: 1.05;
  }

  .wip__lead {
    font-size: 1.25rem;
    color: var(--marking-yellow);
  }

  /* A strip of road with a dashed centre line, slowly moving. */
  .road {
    position: relative;
    inline-size: min(100%, 36rem);
    block-size: 5rem;
    margin-block-start: var(--space-6);
    overflow: hidden;
    background: var(--asphalt-800);
    border-block: 4px solid var(--marking-white);
    border-radius: 4px;
  }

  .road__line {
    position: absolute;
    inset: calc(50% - 3px) 0 auto -64px;
    block-size: 6px;
    background: repeating-linear-gradient(
      90deg,
      var(--marking-yellow) 0 40px,
      transparent 40px 64px
    );
    animation: road-move 1.6s linear infinite;
  }

  @keyframes road-move {
    to {
      transform: translateX(64px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .road__line {
      animation: none;
    }
  }
}