@layer ojay-reset, ojay-primitives, ojay-worlds;

@layer ojay-reset {
  :where(.ojay-page) {
    --ojay-bg: #f3f0e8;
    --ojay-surface: #fffdf7;
    --ojay-ink: #161714;
    --ojay-muted: #54584f;
    --ojay-accent: #c43d23;
    --ojay-rule: color-mix(in srgb, var(--ojay-ink) 22%, transparent);
    --ojay-display: Georgia, "Times New Roman", serif;
    --ojay-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: light;
    box-sizing: border-box;
    min-height: 100%;
    overflow-x: hidden;
    background: var(--ojay-bg);
    color: var(--ojay-ink);
    font-family: var(--ojay-body);
    line-height: 1.55;
  }

  :where(.ojay-page *, .ojay-page *::before, .ojay-page *::after) {
    box-sizing: inherit;
  }

  :where(.ojay-page body) {
    min-height: 100vh;
    margin: 0;
    background: inherit;
    color: inherit;
  }

  :where(.ojay-page img, .ojay-page svg) {
    display: block;
    max-width: 100%;
  }

  :where(.ojay-page a, .ojay-page button, .ojay-page input, .ojay-page textarea) {
    font: inherit;
  }

  :where(.ojay-page :focus-visible) {
    outline: 3px solid var(--ojay-accent);
    outline-offset: 4px;
  }
}

@layer ojay-primitives {
  .ojay-shell {
    width: min(100% - 40px, 1180px);
    margin-inline: auto;
  }

  .ojay-nav {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--ojay-rule);
  }

  .ojay-nav__mark {
    color: inherit;
    font-weight: 760;
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  .ojay-nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 20px;
  }

  .ojay-nav__links a {
    min-height: 44px;
    color: inherit;
    text-underline-offset: 5px;
  }

  .ojay-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
    gap: clamp(36px, 7vw, 112px);
    align-items: end;
    min-height: min(720px, calc(100vh - 72px));
    padding-block: clamp(56px, 10vw, 128px) clamp(48px, 8vw, 96px);
  }

  .ojay-hero h1 {
    max-width: 12ch;
    margin: 0;
    font-family: var(--ojay-display);
    font-size: clamp(3.2rem, 8vw, 6rem);
    font-weight: 650;
    letter-spacing: -0.04em;
    line-height: 0.94;
    text-wrap: balance;
  }

  .ojay-hero__support {
    align-self: end;
    max-width: 42ch;
  }

  .ojay-hero__support p {
    margin: 0 0 24px;
    color: var(--ojay-muted);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
  }

  .ojay-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .ojay-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 1px solid var(--ojay-ink);
    border-radius: 999px;
    background: var(--ojay-ink);
    color: var(--ojay-bg);
    font-weight: 720;
    text-decoration: none;
    transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms ease;
  }

  .ojay-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--ojay-ink) 18%, transparent);
  }

  .ojay-button--quiet {
    background: transparent;
    color: var(--ojay-ink);
  }

  .ojay-section {
    padding-block: clamp(64px, 10vw, 136px);
    border-top: 1px solid var(--ojay-rule);
  }

  .ojay-section h2 {
    max-width: 18ch;
    margin: 0 0 30px;
    font-family: var(--ojay-display);
    font-size: clamp(2.1rem, 5vw, 4.6rem);
    letter-spacing: -0.035em;
    line-height: 1;
    text-wrap: balance;
  }

  .ojay-content {
    columns: 2 320px;
    column-gap: clamp(32px, 6vw, 88px);
    max-width: 75rem;
  }

  .ojay-content > * {
    break-inside: avoid;
    max-width: 70ch;
    margin: 0 0 1.1em;
    color: var(--ojay-muted);
  }

  .ojay-disclosure {
    border-block: 1px solid var(--ojay-rule);
    padding-block: 16px;
  }

  .ojay-disclosure summary {
    min-height: 44px;
    cursor: pointer;
    color: var(--ojay-ink);
    font-weight: 720;
  }

  .ojay-field {
    display: grid;
    gap: 8px;
    max-width: 42rem;
    margin-block: 20px;
  }

  .ojay-field :is(input, textarea) {
    min-height: 48px;
    width: 100%;
    border: 1px solid var(--ojay-rule);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--ojay-surface);
    color: var(--ojay-ink);
  }

  .ojay-status,
  .ojay-validation {
    max-width: 70ch;
    margin-block: 20px;
    padding: 18px 20px;
    border: 1px solid var(--ojay-rule);
    border-radius: 14px;
    background: var(--ojay-surface);
    color: var(--ojay-ink);
  }

  .ojay-footer {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    padding-block: 40px;
    border-top: 1px solid var(--ojay-rule);
    color: var(--ojay-muted);
  }

  @media (max-width: 760px) {
    .ojay-shell {
      width: min(100% - 32px, 1180px);
    }

    .ojay-nav {
      min-height: 64px;
    }

    .ojay-nav__links a:not(.ojay-button) {
      display: none;
    }

    .ojay-hero {
      grid-template-columns: 1fr;
      gap: 28px;
      min-height: auto;
      padding-block: 52px 64px;
    }

    .ojay-hero h1 {
      font-size: clamp(3rem, 15vw, 5.2rem);
    }

    .ojay-content {
      columns: 1;
    }

    .ojay-footer {
      flex-direction: column;
    }
  }

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

@layer ojay-worlds {
  .ojay-world--signal {
    --ojay-bg: #f1eee5;
    --ojay-surface: #fffdf8;
    --ojay-ink: #171815;
    --ojay-muted: #555a51;
    --ojay-accent: #c23d27;
  }

  .ojay-world--workbench {
    --ojay-bg: #101816;
    --ojay-surface: #18231f;
    --ojay-ink: #f1f4eb;
    --ojay-muted: #b7c0b4;
    --ojay-accent: #d6ff49;
    --ojay-display: ui-sans-serif, system-ui, sans-serif;
    color-scheme: dark;
  }

  .ojay-world--workbench .ojay-button {
    border-color: var(--ojay-accent);
    background: var(--ojay-accent);
    color: #101810;
  }

  .ojay-world--material {
    --ojay-bg: #e93820;
    --ojay-surface: #f9573f;
    --ojay-ink: #190f0b;
    --ojay-muted: #3e1b14;
    --ojay-accent: #fff6dc;
    --ojay-display: ui-sans-serif, system-ui, sans-serif;
  }

  .ojay-world--material .ojay-button {
    background: var(--ojay-ink);
    color: var(--ojay-accent);
  }
}