/* ============================================================
   okeke.us — Quiet Authority, azure edition
   Editorial restraint. Light ink on dark surfaces, sapphire accent —
   the same product language as the Sapphires dashboards.
   NOTE: token NAMES kept from the warm-paper era so every page works
   unchanged — "paper" now means the dark page surface, "ink" the light
   foreground.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* Color — dark ink surfaces, light foreground, sapphire accent */
  --color-ink:        #F2F4F7;   /* near-white foreground */
  --color-ink-soft:   #C3C9D2;
  --color-mute:       #8A919C;
  --color-mute-soft:  #5F6670;
  --color-paper:      #0F1114;   /* dark page surface */
  --color-paper-edge: #16181B;   /* raised surface */
  --color-rule:       #262A30;   /* subtle cool border */
  --color-accent:     #5EA7FF;   /* sapphire azure — single hero color */
  --color-accent-ink: #8CC4FF;   /* lighter azure for text/hover */
  --color-success:    #6FBF73;
  --color-error:      #E06C5B;
  --logo-filter:      none;      /* white logo as-is on dark */

  /* Type — Geist throughout, mono for small marks */
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Tracking & weight — Geist runs tight */
  --tracking-tight: -0.025em;
  --tracking-snug:  -0.01em;
  --tracking-flat:  0;
  --tracking-wide:  0.08em;
  --tracking-edge:  0.18em;     /* for edge-stack micro-caps */

  /* Type scale — editorial, opinionated */
  --type-eyebrow: 0.6875rem;    /* 11px */
  --type-meta:    0.8125rem;    /* 13px */
  --type-body:    1rem;
  --type-lead:    1.1875rem;    /* 19px */
  --type-h3:      1.5rem;
  --type-h2:      clamp(2rem, 4vw, 3rem);
  --type-h1:      clamp(2.75rem, 7vw, 5rem);

  /* Space — generous */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  /* Radius — almost-none, hard edges */
  --r-tight: 2px;
  --r-soft:  4px;
  --r-pill:  999px;

  /* Rule weight */
  --rule-hair: 0.5px;
  --rule-thin: 1px;
}

/* ---- Light theme tokens (azure on light). Applied two ways:
   explicit user choice via data-theme="light", or OS preference when
   the user hasn't chosen (no data-theme attribute set). ---- */
:root[data-theme="light"] {
  --color-ink:        #16181D;
  --color-ink-soft:   #3C424B;
  --color-mute:       #6A7280;
  --color-mute-soft:  #A6ADB8;
  --color-paper:      #F7F9FC;
  --color-paper-edge: #EDF1F7;
  --color-rule:       #D9DFE8;
  --color-accent:     #2F7BE0;   /* deeper azure for contrast on light */
  --color-accent-ink: #1D5FBF;
  --color-success:    #3E7C46;
  --color-error:      #B5432F;
  --logo-filter:      invert(1); /* white logo -> ink on light */
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-ink:        #16181D;
    --color-ink-soft:   #3C424B;
    --color-mute:       #6A7280;
    --color-mute-soft:  #A6ADB8;
    --color-paper:      #F7F9FC;
    --color-paper-edge: #EDF1F7;
    --color-rule:       #D9DFE8;
    --color-accent:     #2F7BE0;
    --color-accent-ink: #1D5FBF;
    --color-success:    #3E7C46;
    --color-error:      #B5432F;
    --logo-filter:      invert(1);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Guard against any element leaking past the viewport on phones —
     the page must never scroll sideways. */
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--color-ink);
  background-color: var(--color-paper);
  /* Quiet azure atmosphere — same glow language as the dashboards */
  background-image:
    radial-gradient(900px 420px at 82% -8%, rgba(94,167,255,0.07), transparent 60%),
    radial-gradient(700px 380px at -10% 108%, rgba(94,167,255,0.04), transparent 60%);
  background-attachment: fixed;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial layout primitive — content rail + outer edge */
.rail {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--s-6);
  position: relative;
}
@media (min-width: 900px) {
  .rail { padding: 0 var(--s-8); }
}

/* Edge-stack labels — vertical micro-caps anchored to left edge.
   This is the signature spatial move for okeke.us. */
.edge-stack {
  position: absolute;
  left: var(--s-4);
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-edge);
  color: var(--color-mute-soft);
  text-transform: uppercase;
}
@media (max-width: 899px) { .edge-stack { display: none; } }

/* Eyebrow — small label above section headings */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-edge);
  color: var(--color-accent-ink);
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--color-accent);
}

/* Typography */
.display {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}
.display em {
  font-style: normal;
  color: var(--color-accent);
  font-weight: 700;
}
h2.section-title {
  font-size: var(--type-h2);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  margin: 0;
}
.lead {
  font-size: var(--type-lead);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 56ch;
  margin: 0;
  font-weight: 400;
}

/* Buttons — sharp, restrained, no gradient */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-tight);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.btn-primary:hover { background: var(--color-accent-ink); border-color: var(--color-accent-ink); }
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule);
}
.btn-ghost:hover { border-color: var(--color-ink); }
.btn svg { width: 16px; height: 16px; }

/* Cards — hairline border, no shadow, single accent line */
.card {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--r-soft);
  padding: var(--s-6);
  position: relative;
}
.card-accent::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 36px;
  height: 2px;
  background: var(--color-accent);
}

/* Icon language — 1.5px Lucide stroke, ink color */
.icon {
  width: 22px;
  height: 22px;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Horizontal rule — hairline warm */
.rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin: 0;
}

/* Meta row — small key-value bands */
.meta {
  display: flex;
  gap: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--tracking-snug);
  color: var(--color-mute);
}
.meta-key { color: var(--color-mute-soft); margin-right: var(--s-2); }
.meta-val { color: var(--color-ink); }

/* Nav logo follows the theme — white PNG on dark, inverted to ink on light */
.nav-logo { filter: var(--logo-filter); }

/* Theme toggle — cycles system -> light -> dark. Markup: a .theme-toggle
   button with three icons; the matching one shows per data-mode. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; cursor: pointer;
  border: 1px solid var(--color-rule);
  border-radius: var(--r-tight);
  padding: 0.45rem;
  color: var(--color-mute);
  transition: color 120ms ease, border-color 120ms ease;
}
.theme-toggle:hover { color: var(--color-ink); border-color: var(--color-ink); }
.theme-toggle svg {
  display: none; width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle:not([data-mode]) .tt-sys,
.theme-toggle[data-mode="system"] .tt-sys { display: block; }
.theme-toggle[data-mode="light"] .tt-sun { display: block; }
.theme-toggle[data-mode="dark"] .tt-moon { display: block; }

</invoke>