/* Plexoria — signed intelligence. Design system: tokens, both themes, components. */

:root {
  /* cool, accent-biased neutrals — light ground */
  --ink: #0e1620;
  --ink-2: #33414f;
  --muted: #5b6b7a;
  --ground: #f4f6f5;
  --surface: #ffffff;
  --surface-2: #eef2f1;
  --line: #d7dedd;
  --line-strong: #c2cbca;
  --accent: #0e9e86;      /* signal teal, deepened for light contrast */
  --accent-ink: #063f36;
  --accent-wash: #e2f2ee;
  --seal: #b7802f;        /* signature seal, sparing */
  --shadow: 0 1px 2px rgba(14, 22, 32, .06), 0 8px 30px rgba(14, 22, 32, .07);

  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0: clamp(.98rem, .95rem + .15vw, 1.05rem);
  --step-1: clamp(1.16rem, 1.1rem + .35vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.3rem + .7vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.6vw, 3rem);
  --step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem);

  --container: 1080px;
  --measure: 66ch;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6edf3;
    --ink-2: #aeb9c5;
    --muted: #8a97a6;
    --ground: #0b0f14;
    --surface: #121821;
    --surface-2: #0f151d;
    --line: #212b36;
    --line-strong: #2c3846;
    --accent: #3ae0c4;
    --accent-ink: #d7fff4;
    --accent-wash: #0f2620;
    --seal: #e5b567;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 40px rgba(0, 0, 0, .45);
  }
}

/* explicit toggle wins over the media query, both directions */
:root[data-theme="light"] {
  --ink: #0e1620; --ink-2: #33414f; --muted: #5b6b7a; --ground: #f4f6f5;
  --surface: #ffffff; --surface-2: #eef2f1; --line: #d7dedd; --line-strong: #c2cbca;
  --accent: #0e9e86; --accent-ink: #063f36; --accent-wash: #e2f2ee; --seal: #b7802f;
  --shadow: 0 1px 2px rgba(14, 22, 32, .06), 0 8px 30px rgba(14, 22, 32, .07);
}
:root[data-theme="dark"] {
  --ink: #e6edf3; --ink-2: #aeb9c5; --muted: #8a97a6; --ground: #0b0f14;
  --surface: #121821; --surface-2: #0f151d; --line: #212b36; --line-strong: #2c3846;
  --accent: #3ae0c4; --accent-ink: #d7fff4; --accent-wash: #0f2620; --seal: #e5b567;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 40px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

h1, h2, h3 { font-family: var(--mono); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: 0; }
p { margin: 0; max-width: var(--measure); }
a { color: inherit; }

.eyebrow {
  font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: .18em; color: var(--accent); margin: 0 0 .9rem;
  display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--accent); opacity: .7; }

.lede { font-size: var(--step-1); color: var(--ink-2); line-height: 1.5; max-width: 52ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(1.1) blur(10px);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 60px; }
.brand { font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; font-size: 1.05rem; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.nav-links { margin-left: auto; display: flex; gap: 1.35rem; align-items: center; }
.nav-links a { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; color: var(--muted); }
.nav-links a:hover { color: var(--ink); }
.theme-toggle { font-family: var(--mono); font-size: var(--step--1); background: none; border: 1px solid var(--line-strong); color: var(--muted); border-radius: 999px; padding: .3rem .7rem; cursor: pointer; }
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
.nav-links a.lang { border: 1px solid var(--line-strong); border-radius: 999px; padding: .28rem .6rem; color: var(--ink); }
.nav-links a.lang:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 800px) { .nav-links a.lang { display: inline-flex; } }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .04em; text-decoration: none; padding: .7rem 1.1rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--ground); }
:root[data-theme="dark"] .btn-primary, .btn-primary { color: #04120f; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- hero ---- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
#plexus { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.hero h1 span { color: var(--accent); }
.hero .lede { margin-top: 1.4rem; }
.hero-cta { display: flex; gap: .8rem; margin-top: 2rem; flex-wrap: wrap; }

/* signed-bundle card — the trust thesis, shown not told */
.signed {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; font-family: var(--mono); font-size: var(--step--1);
}
.signed-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .95rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.signed-head .name { color: var(--ink-2); }
.badge { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); font-size: .74rem; letter-spacing: .06em; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.signed-body { padding: .95rem; display: grid; gap: .55rem; }
.kv { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; }
.kv .k { color: var(--muted); }
.kv .v { color: var(--ink); word-break: break-all; }
.kv .v.hash { color: var(--accent); }
.seal-line { display: flex; align-items: center; gap: .5rem; color: var(--seal); border-top: 1px dashed var(--line-strong); padding-top: .6rem; margin-top: .2rem; }

/* ---- sections ---- */
section { padding-block: clamp(3rem, 7vw, 5.5rem); border-bottom: 1px solid var(--line); }
.section-label { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.section-head { max-width: var(--measure); margin-bottom: 2.4rem; }
.section-head h2 { margin-top: .8rem; }
.section-head p { margin-top: 1rem; color: var(--ink-2); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.card h3 { display: flex; align-items: baseline; gap: .6rem; }
.card h3 .idx { font-family: var(--mono); font-size: .8rem; color: var(--accent); }
.card p { margin-top: .6rem; color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; }

/* metric row */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.metric { background: var(--surface); padding: 1.3rem 1.4rem; }
.metric .num { font-family: var(--mono); font-size: var(--step-2); color: var(--ink); font-variant-numeric: tabular-nums; }
.metric .num.low { color: var(--seal); }
.metric .lab { font-family: var(--mono); font-size: var(--step--1); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: .35rem; }

/* data table (glossary / typologies) */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
table.tbl th, table.tbl td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl th { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--muted); background: var(--surface-2); font-weight: 600; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl td code, .prose code { font-family: var(--mono); font-size: .86em; background: var(--accent-wash); color: var(--accent-ink); padding: .08em .38em; border-radius: 4px; }
.tag-hard { color: var(--seal); font-family: var(--mono); font-size: .76rem; }
.tag-overt { color: var(--muted); font-family: var(--mono); font-size: .76rem; }

/* prose (learn/approach) */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.6rem; margin-bottom: .8rem; font-size: var(--step-2); }
.prose h3 { margin-top: 1.8rem; margin-bottom: .5rem; }
.prose p, .prose ul { margin-top: .9rem; color: var(--ink-2); }
.prose ul { padding-left: 1.1rem; }
.prose li { margin-top: .35rem; }
.prose strong { color: var(--ink); }
.callout { border-left: 3px solid var(--accent); background: var(--accent-wash); color: var(--accent-ink); padding: .9rem 1.1rem; border-radius: 0 8px 8px 0; margin-top: 1.2rem; font-size: var(--step--1); }

/* code block */
pre { font-family: var(--mono); font-size: var(--step--1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; overflow-x: auto; line-height: 1.55; }
pre .c { color: var(--muted); }
pre .a { color: var(--accent); }

/* footer */
footer { padding-block: 3rem; }
.foot { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; }
.foot .brand { font-size: 1rem; }
.foot-col h4 { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 .7rem; font-weight: 600; }
.foot-col a { display: block; text-decoration: none; color: var(--ink-2); font-size: var(--step--1); margin-bottom: .4rem; }
.foot-col a:hover { color: var(--accent); }
.foot-note { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--1); font-family: var(--mono); }

:where(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; }
  .nav-links a:not(.btn) { display: none; }
}