/* AgentHub marketing site stylesheet (≤15KB gzipped target)
   - CSS variables for light & dark themes
   - System UI typography
   - Spacing scale, layout containers
   - Accessible focus states
   - Reduced motion support
*/

/* 1) Theming variables */
:root {
  color-scheme: light dark;
  /* Palette (light) */
  --color-bg: #ffffff;
  --color-surface: #f6f8fa;
  --color-text: #0a0a0a;
  --color-muted: #57606a;
  --color-border: #d0d7de;
  --color-accent: #0969da;
  --color-accent-contrast: #ffffff;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Typography scale */
  --font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-size-1: 0.875rem;  /* 14px */
  --font-size-2: 1rem;      /* 16px */
  --font-size-3: 1.125rem;  /* 18px */
  --font-size-4: 1.25rem;   /* 20px */
  --font-size-5: 1.5rem;    /* 24px */
  --font-size-6: 2rem;      /* 32px */
  --font-size-7: 2.5rem;    /* 40px */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0d1117;
    --color-surface: #161b22;
    --color-text: #e6edf3;
    --color-muted: #9aa7b4;
    --color-border: #30363d;
    --color-accent: #2f81f7;
    --color-accent-contrast: #0b1020;
    --shadow-1: 0 1px 2px rgba(0,0,0,0.6);
    --shadow-2: 0 6px 18px rgba(0,0,0,0.45);
  }
}

/* 2) Base reset & typography */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-2); /* 16px */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: var(--space-5) 0 var(--space-3); }
h1 { font-size: var(--font-size-7); }
h2 { font-size: var(--font-size-6); }
h3 { font-size: var(--font-size-5); }

p { margin: 0 0 var(--space-4); color: var(--color-text); }
small, .muted { color: var(--color-muted); }

/* Links */
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 3) Layout containers */
.header, header { position: relative; }
.container {
  max-width: 72rem; /* ~1152px */
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 48rem) { /* >=768px */
  .container { padding-inline: var(--space-6); }
}
@media (min-width: 90rem) { /* >=1440px */
  .container { padding-inline: 0; }
}

/* Sticky header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in oklab, var(--color-bg), transparent 0%);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
  backdrop-filter: saturate(120%) blur(6px);
}
.site-header .inner { display: flex; align-items: center; gap: var(--space-4); height: 3.5rem; }
.site-header nav { margin-left: auto; display: flex; gap: var(--space-3); align-items: center; }
.site-header .logo { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: inherit; }

/* 4) Navigation (responsive CSS-only) */
.nav-toggle { display: none; }
.nav-menu { display: flex; gap: var(--space-3); }
.nav-menu a { padding: var(--space-2) var(--space-3); border-radius: 6px; }
.nav-cta { background: var(--color-accent); color: var(--color-accent-contrast); padding: var(--space-2) var(--space-3); border-radius: 6px; }

@media (max-width: 48rem) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-menu { display: none; position: absolute; top: 100%; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: var(--space-3); box-shadow: var(--shadow-2); flex-direction: column; min-width: 12rem; }
  /* checkbox hack */
  #menu-toggle:checked ~ .nav-menu { display: flex; }
}

/* 5) Components */
button, .btn { display: inline-block; padding: var(--space-2) var(--space-4); border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit; box-shadow: var(--shadow-1); }
.btn-primary { background: var(--color-accent); color: var(--color-accent-contrast); border-color: color-mix(in oklab, var(--color-accent), black 10%); }
.btn:hover { filter: brightness(0.98); }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-5); box-shadow: var(--shadow-1); }

.table-container { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }

input, textarea, select { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: inherit; }
label { display: block; margin: var(--space-2) 0 var(--space-1); font-weight: 600; }
fieldset { border: 1px solid var(--color-border); border-radius: 8px; padding: var(--space-4); }
legend { padding: 0 var(--space-2); }

/* 6) Focus visibility */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* 7) Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .site-header { backdrop-filter: none; }
}

/* 8) Page scaffolding helpers */
main { display: block; }
header, footer { padding-block: var(--space-3); }
footer { margin-top: var(--space-7); border-top: 1px solid var(--color-border); }

/* 9) Utilities */
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-4 > * + * { margin-top: var(--space-4); }
.center { text-align: center; }
.hidden { display: none !important; }