/* Aero brand layer (#672). Loaded right after site.css on every page that
   isn't the homepage or the dashboard. It moves the old Apple-blue system
   onto the Owner-style palette the homepage (#642) and dashboard (#649) use:
   Manrope, #094413 green for actions, #2c2c2c ink, warm #FBF8F5 ground.

   It only remaps site.css tokens and restyles shared components. No markup,
   ids or script hooks depend on it, so removing the <link> restores the old
   look exactly. Page-specific layouts come in #678-#682. */

@font-face {
  font-family: "Aero Manrope";
  src: url("../fonts/manrope/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --brand-green: #094413;
  --brand-green-hover: #0d5a1a;
  --brand-ground: #fbf8f5;
  --brand-on-accent: #ffffff;
  --brand-font: "Aero Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --paper: #ffffff;
  --surface: #ffffff;
  --surface-2: var(--brand-ground);
  --surface-3: #f1ede7;
  --ink: #2c2c2c;
  --ink-2: #494949;
  --ink-3: #686868;          /* 5.6:1 on white, 5.3:1 on the warm ground */
  --line: #e9e4dd;
  --line-2: #dcd6ce;
  --rule: #dcd6ce;
  --accent: var(--brand-green);
  --accent-ink: var(--brand-green);
  --accent-soft: #e8f0e8;
  --good: #23663a;
  --bad: #b42318;
  --night: #0f2414;
  --night-2: #12351b;
  --night-line: #24452c;

  --display: var(--brand-font);
  --sans: var(--brand-font);

  --r-sm: 12px;
  --r: 16px;
  --r-lg: 20px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(32, 58, 43, .05);
  --shadow: 0 2px 6px rgba(32, 58, 43, .05), 0 12px 32px -8px rgba(32, 58, 43, .12);
  --shadow-lg: 0 4px 12px rgba(32, 58, 43, .06), 0 32px 80px -16px rgba(32, 58, 43, .22);
  --header-h: 70px;
}

/* Same three ways in as site.css. Dark greens match dash.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101411; --surface: #1c221d; --surface-2: #151a16; --surface-3: #283029;
    --ink: #f3f5f2; --ink-2: #d0d7d0; --ink-3: #a1aaa1;
    --line: #313a32; --line-2: #3d473e; --rule: #3d473e;
    --accent: #9ed0a4; --accent-ink: #9ed0a4; --accent-soft: #25372a;
    --brand-on-accent: #0f2414; --brand-green-hover: #b6dfbb;
    --good: #83c693; --bad: #ff8b82;
  }
}
:root[data-theme="dark"], .dark, .theme-dark {
  --paper: #101411; --surface: #1c221d; --surface-2: #151a16; --surface-3: #283029;
  --ink: #f3f5f2; --ink-2: #d0d7d0; --ink-3: #a1aaa1;
  --line: #313a32; --line-2: #3d473e; --rule: #3d473e;
  --accent: #9ed0a4; --accent-ink: #9ed0a4; --accent-soft: #25372a;
  --brand-on-accent: #0f2414; --brand-green-hover: #b6dfbb;
  --good: #83c693; --bad: #ff8b82;
  --canvas: var(--paper);
}

body { letter-spacing: -0.01em; }
::selection { background: #cfe5d1; color: #12351b; }

/* ---- type */
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.03em; }
.display, .display-2 { font-weight: 650; letter-spacing: -0.04em; }
.display-3 { font-weight: 650; }
.eyebrow { font-weight: 650; color: var(--accent-ink); }
.label { font-weight: 650; }

/* ---- buttons: 16px radius, green action, ink secondary */
.btn { border-radius: 16px; font-weight: 650; }
.btn-accent { background: var(--accent); color: var(--brand-on-accent); }
.btn-accent:hover { background: var(--brand-green-hover); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--accent); color: var(--brand-on-accent); }
.btn-ghost { color: var(--accent-ink); }

/* ---- fields */
input, select, textarea { border-radius: 12px; border-color: var(--line-2); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field label { font-weight: 600; }

/* ---- header: solid, 70px, Owner nav weights */
.site-header {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
  padding: 0 max(16px, calc((100vw - 1232px) / 2));
}
.brand { font-size: 22px; font-weight: 700; letter-spacing: -.8px; color: var(--ink); }
.brand .hgi { width: 24px; height: 24px; color: var(--ink); }
.site-nav { gap: 12px; }
.site-nav a {
  min-height: 44px; padding: 0 8px; border-radius: 12px;
  font-size: 14px; font-weight: 650; color: var(--ink);
}
.site-nav a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 5px; }
.site-nav a.nav-cta {
  background: var(--ink); color: var(--paper);
  padding: 0 20px; border-radius: 16px; margin-left: 8px; font-weight: 650;
}
.site-nav a.nav-cta:hover { background: var(--accent); color: var(--brand-on-accent); text-decoration: none; }

/* ---- cards, tags, rows */
.card { border-radius: 20px; border-color: var(--line); }
.tag { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.row-title .hgi, a.row:hover .row-arrow { color: var(--accent); }

/* ---- dark product sections keep the green, not the old blue */
.section-ink .mono a,
.section-ink .eyebrow,
.section-ink .more,
.section-ink .tile .tile-kicker { color: #9ed0a4; }

/* ---- footer on the warm ground */
.site-footer { background: var(--surface-2); color: var(--ink-3); border-top: 1px solid var(--line); }
.site-footer .brand { color: var(--ink); }
.footer-grid a:hover { color: var(--accent-ink); }

:focus-visible { outline-color: color-mix(in srgb, var(--accent) 70%, transparent); }

/* The Owner-composition pages (homepage, industries, guides, gtm) are light
   only, like owner-home.css. Restate every light token on .owner-home so an
   OS in dark mode can't leak the dark values above into them (#681). */
.owner-home {
  color-scheme: light;
  --paper: #ffffff; --surface: #ffffff; --surface-2: #fbf8f5; --surface-3: #f1ede7;
  --ink: #2c2c2c; --ink-2: #494949; --ink-3: #686868;
  --line: #e9e4dd; --line-2: #dcd6ce; --rule: #dcd6ce;
  --accent: #094413; --accent-ink: #094413; --accent-soft: #e8f0e8;
  --brand-on-accent: #ffffff; --brand-green-hover: #0d5a1a;
  --mark-soft: #FFF4D6; --mark-ink: #8A5A00;
  --good: #23663a; --bad: #b42318;
  --canvas: #ffffff;
  --shadow-sm: 0 1px 2px rgba(32, 58, 43, .05);
  --shadow: 0 2px 6px rgba(32, 58, 43, .05), 0 12px 32px -8px rgba(32, 58, 43, .12);
  --shadow-lg: 0 4px 12px rgba(32, 58, 43, .06), 0 32px 80px -16px rgba(32, 58, 43, .22);
}