/* ============================================================
   APositiveCorp design tokens (canonical — see ../DESIGN.md)
   Structure inherited from the AglaiaSense Design System.
   Light is default; dark via data-theme="dark" or OS preference.
   All text pairs verified WCAG 2.2 AA.
   ============================================================ */
:root {
  /* identity */
  --green-50: #E9F6EF; --green-100: #CDEBDC; --green-200: #9BD8BB;
  --green-300: #5FCB97; --green-400: #2DB478; --green-500: #10A35F;
  --green-600: #0E8750; --green-700: #0A6B45; --green-800: #084F34; --green-900: #063D29;

  --color-brand: var(--green-500);
  --color-primary: var(--green-700);
  --color-primary-hover: #095C3B;
  --color-primary-active: var(--green-800);
  --color-primary-tint: var(--green-50);

  --color-fg: #182420;
  --color-fg-secondary: #42524A;
  --color-fg-muted: #5C6B62;
  --color-fg-primary: var(--green-700);
  --color-fg-on-primary: #FFFFFF;

  --color-bg: #FFFFFF;
  --color-bg-canvas: #F3F5F2;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #F3F5F2;

  --color-border: #E3E8E2;
  --color-border-strong: #838B85;
  --color-control-border: #838B85;
  --color-focus-ring: var(--green-700);

  --color-link: var(--green-700);
  --color-link-hover: var(--green-800);

  --color-success: #187B4D; --color-warning: #8A5A00; --color-danger: #BA3C35;

  /* type (scale shared with AglaiaSense) */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem;
  --text-4xl: 2.75rem; --text-5xl: 3.5rem; --text-6xl: 4.5rem;
  --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65;

  /* spacing / shape (inherited unchanged) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-32: 128px;
  --radius-control: 6px; --radius-card: 10px; --radius-full: 999px;
  --control-h-md: 37px; --control-h-lg: 44px;
  --shadow-card: 0 1px 2px rgba(20, 24, 24, 0.04);
  --duration-fast: 120ms;
  --container-max: 1100px;
}

[data-theme="dark"] {
  --color-primary: #15804F;
  --color-primary-hover: #1A9158;
  --color-primary-active: #15804F;
  --color-primary-tint: rgba(16, 163, 95, 0.14);
  --color-fg: #EEF2EE;
  --color-fg-secondary: #B9C4BC;
  --color-fg-muted: #99A69D;
  --color-fg-primary: var(--green-300);
  --color-bg: #1B211D;
  --color-bg-canvas: #161B18;
  --color-surface: #1B211D;
  --color-surface-raised: #242B26;
  --color-surface-sunken: #161B18;
  --color-border: #39433C;
  --color-border-strong: #6F7A72;
  --color-control-border: #6F7A72;
  --color-focus-ring: var(--green-300);
  --color-link: #6FD2A2;
  --color-link-hover: #8ADDB4;
  --radius-control: 4px; --radius-card: 4px;
  --shadow-card: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #15804F;
    --color-primary-hover: #1A9158;
    --color-primary-active: #15804F;
    --color-primary-tint: rgba(16, 163, 95, 0.14);
    --color-fg: #EEF2EE;
    --color-fg-secondary: #B9C4BC;
    --color-fg-muted: #99A69D;
    --color-fg-primary: var(--green-300);
    --color-bg: #1B211D;
    --color-bg-canvas: #161B18;
    --color-surface: #1B211D;
    --color-surface-raised: #242B26;
    --color-surface-sunken: #161B18;
    --color-border: #39433C;
    --color-border-strong: #6F7A72;
    --color-control-border: #6F7A72;
    --color-focus-ring: var(--green-300);
    --color-link: #6FD2A2;
    --color-link-hover: #8ADDB4;
    --radius-control: 4px; --radius-card: 4px;
    --shadow-card: none;
  }
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg);
  background: var(--color-bg);
}
a { color: var(--color-link); transition: color var(--duration-fast); }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0; max-width: 62ch; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--space-5);
}

/* ============================================================
   Header
   ============================================================ */
.site-header { border-bottom: 1px solid var(--color-border); }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding-block: var(--space-4);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  color: var(--color-fg); text-decoration: none;
}
.wordmark:hover { color: var(--color-fg); }
.wordmark .mark { color: var(--color-brand); flex: none; }
.site-nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-nav a {
  color: var(--color-fg-secondary); text-decoration: none;
  font-size: var(--text-sm); font-weight: 500;
  padding: var(--space-2) 0; /* ≥24px target */
}
.site-nav a:hover { color: var(--color-fg); }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero .container {
  padding-block: var(--space-20) var(--space-24);
  position: relative;
}
.hero h1 {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  font-weight: 700; line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.hero .lede {
  margin-top: var(--space-6);
  font-size: var(--text-md);
  color: var(--color-fg-secondary);
  max-width: 54ch;
}
.hero .actions {
  margin-top: var(--space-10);
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
}
.crosshair-field {
  position: absolute; right: var(--space-5); top: var(--space-16);
  color: var(--color-border); pointer-events: none;
}
.crosshair-field .big-plus { color: var(--color-brand); }
@media (max-width: 899px) {
  .crosshair-field { display: none; }
  .hero .container { padding-block: var(--space-16); }
}

/* ============================================================
   Buttons
   ============================================================ */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-h-lg);
  padding: var(--space-2) var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-control);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400;
  text-decoration: none; cursor: pointer;
  background: var(--color-primary); color: var(--color-fg-on-primary);
  transition: background-color var(--duration-fast);
}
.button:hover { background: var(--color-primary-hover); color: var(--color-fg-on-primary); }
.button:active { background: var(--color-primary-active); }

/* ============================================================
   Sections
   ============================================================ */
.section .container { padding-block: var(--space-20); }
.section.alt { background: var(--color-bg-canvas); }
.section h2 {
  font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-snug);
  margin-bottom: var(--space-10);
}

/* Services: ruled rows with plus markers */
.service-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.service-list li {
  display: grid; grid-template-columns: var(--space-8) 1fr;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.service-list .plus { color: var(--color-brand); margin-top: 5px; }
.service-list h3 {
  font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-snug);
  grid-column: 2;
}
.service-list li .plus { grid-row: 1 / span 2; }
.service-list p { grid-column: 2; color: var(--color-fg-secondary); }

/* How we work: term + description rows */
.work-list { margin: 0; display: grid; gap: var(--space-8); }
.work-list > div { display: grid; gap: var(--space-2); }
.work-list dt { font-weight: 600; font-size: var(--text-md); font-family: var(--font-display); }
.work-list dd { margin: 0; color: var(--color-fg-secondary); max-width: 62ch; }
@media (min-width: 900px) {
  .work-list > div { grid-template-columns: 260px 1fr; gap: var(--space-8); }
}

/* Contact */
.contact-email {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(var(--text-lg), 3vw, var(--text-xl));
}
.contact-note { margin-top: var(--space-4); color: var(--color-fg-secondary); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--color-border); }
.site-footer .container {
  padding-block: var(--space-8);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--color-fg-muted);
}