@import "./tokens.css";

:root {
  color-scheme: dark;
  --page: var(--oabj-site-bg);
  --surface: var(--oabj-site-elevated);
  --surface-soft: var(--oabj-site-card-strong);
  --surface-dark: var(--oabj-site-bg);
  --text: var(--oabj-site-text);
  --muted: var(--oabj-site-muted);
  --primary: var(--oabj-site-action);
  --primary-strong: var(--oabj-site-action-strong);
  --accent: var(--oabj-site-accent);
  --border: var(--oabj-site-border);
  --radius: var(--project-radius-card);
  --max-width: var(--oabj-site-layout-max);
  --gap: var(--oabj-site-section-gap);
  --heading: var(--oabj-site-font-sans);
  --body: var(--oabj-site-font-sans);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: radial-gradient(circle at top left, var(--oabj-site-glow-action), transparent 28%), radial-gradient(circle at top right, var(--oabj-site-glow-accent), transparent 24%), linear-gradient(180deg, var(--oabj-site-bg-start) 0%, var(--oabj-site-bg) 100%);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--body);
  color: var(--text);
  line-height: 1.5;
}

.site-brand-body {
  min-height: 100vh;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  color: var(--text);
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 12px;
  z-index: 10;
  border-radius: 8px;
}

main,
.site-footer {
  width: min(var(--max-width), calc(100% - var(--space-8)));
  margin: 0 auto;
}

.site-header {
  width: min(var(--max-width), calc(100% - var(--space-8)));
  margin: 18px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.site-header a,
.mini-link,
.inline-link {
  color: var(--muted);
  text-decoration: none;
}

.site-header a:hover,
.mini-link:hover,
.inline-link:hover {
  color: var(--text);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--primary), var(--accent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--oabj-site-mark-text);
  font-weight: 700;
  letter-spacing: 0;
}

.hero-band,
.content-band,
.cta-band,
.signal-strip,
.feature-card,
.card-grid article,
.stack-list article,
.media-band {
  background: linear-gradient(145deg, var(--surface), var(--surface-dark));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--oabj-site-shadow-card);
}

.hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: var(--gap);
  padding: var(--oabj-site-hero-padding);
}

.hero-media {
  margin: 0;
}

.hero-media img {
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
  min-height: 320px;
  object-fit: cover;
}

.eyebrow,
.label {
  text-transform: uppercase;
  font-size: var(--project-type-eyebrow);
  font-weight: var(--project-weight-strong);
  color: var(--accent);
  letter-spacing: 0;
  margin: 0 0 10px;
}

h1,
h2,
h3 {
  font-family: var(--heading);
  margin: 0 0 12px;
}

h1 {
  font-size: var(--project-type-hero-title);
  line-height: var(--typography-line-height-display);
}

h2 {
  font-size: var(--project-type-section-title);
  line-height: var(--typography-line-height-heading);
}

h3 {
  font-size: var(--oabj-site-h3-size);
}

p,
ul {
  margin: 0;
  color: var(--text);
}

.hero-text,
.media-band p,
.section-heading p,
.hero-meta,
.card-grid p,
.detail-card p,
.feature-card p,
.stack-list p,
.statement-list li {
  color: var(--muted);
  line-height: var(--project-type-body-line);
}

.hero-meta {
  margin-top: var(--space-5);
  font-size: 0.88rem;
}

.hero-actions,
.mini-grid,
.cta-band {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.button,
.mini-link,
.inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--project-button-height);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: var(--project-weight-strong);
  padding: 0 var(--project-button-padding-x);
  text-wrap: balance;
}

.button.primary {
  background: linear-gradient(140deg, var(--primary), var(--primary-strong));
  color: var(--oabj-site-action-text);
}

.button.primary:hover,
.button.primary:focus-visible {
  filter: brightness(1.07);
}

.button.secondary {
  border: 1px solid var(--accent);
  color: var(--text);
  background: var(--oabj-site-accent-soft);
}

.button.secondary:hover,
.button.secondary:focus-visible {
  background: var(--oabj-site-accent-soft-hover);
}

.signal-strip,
.content-band,
.cta-band,
.media-band,
.hero-band,
.feature-card,
.media-band,
.site-footer {
  margin-top: var(--gap);
}

.signal-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding: 32px;
}

.signal-strip article {
  padding: var(--space-5);
}

.split-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--gap);
}

.content-band {
  padding: var(--project-section-padding);
}

.stack-list,
.card-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.stack-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stack-list article,
.card-grid article,
.media-band {
  padding: var(--space-5);
}

.feature-card p {
  margin-bottom: 8px;
}

.mini-link,
.inline-link {
  border: 1px solid var(--border);
  background: var(--oabj-site-primary-soft);
  margin-top: 12px;
  width: fit-content;
}

.mini-link:hover,
.inline-link:hover,
.mini-link:focus-visible,
.inline-link:focus-visible {
  background: var(--oabj-site-accent-soft-hover);
}

.mini-grid {
  margin-top: 10px;
}

.statement-list {
  margin: 14px 0 0;
  padding-left: 20px;
}

.statement-list li {
  margin-bottom: 10px;
}

.cta-band {
  padding: 34px 38px;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
}

.cta-copy {
  max-width: 760px;
}

.site-footer {
  color: var(--muted);
  display: grid;
  gap: 10px;
  padding: 24px 0 40px;
}

.footer-note {
  margin-top: 6px;
  font-size: 0.88rem;
}

.noscript-note {
  margin: 0 auto;
  width: min(var(--max-width), calc(100% - var(--space-8)));
  padding: 0 0 16px;
  font-size: 0.9rem;
  color: var(--muted);
}

.u-margin-top-small {
  margin-top: var(--space-3) !important;
}

.u-margin-top {
  margin-top: var(--space-4) !important;
}

.u-margin-top-large {
  margin-top: var(--space-5) !important;
}

@media (max-width: 980px) {
  .hero-band,
  .split-band,
  .signal-strip,
  .stack-list,
  .card-grid,
  .cta-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hero-band,
  .content-band,
  .signal-strip,
  .cta-band {
    padding: var(--project-mobile-padding);
  }

  .hero-actions,
  .mini-grid,
  .cta-band {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  h1 {
    font-size: var(--project-type-hero-title-mobile);
  }

  h2 {
    font-size: var(--project-type-section-title-mobile);
  }
}