/* =============================================================
   langsyn-theme.css — LangSyn design system (RESTRAINED INSTRUMENT)
   Shared skeleton across .org / .net / .com. Exactly ONE thing
   changes per site: the accent (set in langsyn-<site>.css). Fonts
   are self-hosted (no third-party font load). Ray-field is the hero
   signature — see js/raysfield.js.
   ============================================================= */

/* --- Self-hosted type (vendored woff2, latin) --------------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/SpaceGrotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/SpaceGrotesk-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-500.woff2') format('woff2')}

:root{
  /* ---- canvas + neutrals (shared, identical on all sites) ---- */
  --ls-bg:            #0B0D12;
  --ls-surface:       #12151C;
  --ls-surface-2:     #171B24;
  --ls-border:        #232833;
  --ls-border-strong: #2E3542;

  --ls-text:       #E8EAED;
  --ls-text-2:     #9BA1AC;
  --ls-text-faint: #6B727D;
  --ls-text-muted: #9BA1AC;   /* alias kept for existing markup */

  /* ---- type ---- */
  --ls-font-display:"Space Grotesk","IBM Plex Sans",system-ui,sans-serif;
  --ls-font-sans:   "IBM Plex Sans",system-ui,sans-serif;
  --ls-font-mono:   "IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --ls-tracking-eyebrow:.18em;
  --ls-radius:12px; --ls-radius-sm:8px;
  --ls-dur:240ms; --ls-ease:cubic-bezier(.2,.6,.2,1);

  /* ---- accent: SET PER SITE in langsyn-<site>.css (indigo fallback) ---- */
  --ls-accent-rgb:109 107 246;
  --ls-accent-glow:#9A97FF;
  --ls-accent-ink:#0B0B18;   /* text ON a solid accent fill */
  --ls-accent:        rgb(var(--ls-accent-rgb));
  --ls-accent-border: rgb(var(--ls-accent-rgb) / .35);
  --ls-accent-bg:     rgb(var(--ls-accent-rgb) / .10);
  /* legacy alias used by older per-site rules */
  --ls-accent-primary: var(--ls-accent);

  /* ---- semantic + DKE Studio surface (shared, identical on all sites) ----
     Coherence Spec A2: the ONE home for these recurring semantic colors, so a
     page states `var(--ls-danger)`, never a raw #ff5a5a (gate G2). */
  --ls-danger-rgb:255 90 90;                   /* form-error / service-down red */
  --ls-danger:rgb(var(--ls-danger-rgb));      /* form-error text */
  --ls-warn-rgb:255 160 32;                    /* key-warning amber (hue) */
  --ls-warn-border:rgb(var(--ls-warn-rgb) / .5);
  --ls-warn-bg:rgb(var(--ls-warn-rgb) / .08);
  --ls-studio-accent-rgb:15 181 181;           /* DKE Studio teal — NOT the per-site accent */
  --ls-studio-accent:rgb(var(--ls-studio-accent-rgb));
  /* ---- service-status (status panel: up/down/unknown) ----
     up = green (new), down = --ls-danger red, unknown = --ls-text-faint gray. */
  --ls-ok-rgb:63 185 80;                        /* service-up / healthy green */
  --ls-ok:rgb(var(--ls-ok-rgb));
}

/* --- Reset -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{
  font-family:var(--ls-font-sans);
  font-size:16px;line-height:1.6;font-weight:400;
  color:var(--ls-text);background:var(--ls-bg);
  -webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;
}
/* instrument = no splatter-dot texture; the canvas stays quiet. */
body>*{position:relative;z-index:1}

/* --- Typography --------------------------------------------- */
h1{font-family:var(--ls-font-display);font-weight:500;font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);line-height:1.12;letter-spacing:-.01em;color:var(--ls-text)}
h2{font-family:var(--ls-font-display);font-weight:500;font-size:clamp(1.5rem,1.2rem + 1.3vw,2.15rem);line-height:1.2;color:var(--ls-text)}
h3{font-family:var(--ls-font-display);font-weight:500;font-size:1.05rem;color:var(--ls-text)}
h4{font-family:var(--ls-font-sans);font-weight:500;font-size:.9rem;color:var(--ls-text)}
/* single-accent glow replaces the old gradient-clip highlight */
h1 em{font-style:normal;color:var(--ls-accent-glow)}
a{color:var(--ls-accent);text-decoration:none}
a:hover{color:var(--ls-accent-glow)}
code,.ls-mono{font-family:var(--ls-font-mono)}

/* --- Navigation -------------------------------------------- */
.ls-nav{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 2rem;border-bottom:1px solid var(--ls-border);position:relative;z-index:100}
.ls-nav-logo{display:flex;align-items:center;gap:.5rem;font-family:var(--ls-font-mono);font-size:1rem;font-weight:500;letter-spacing:.04em;color:var(--ls-text);text-decoration:none}
.ls-nav-logo:hover{color:var(--ls-text)}
.ls-nav-logo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ls-accent);flex-shrink:0}
.ls-nav-tld{font-weight:400;color:var(--ls-text-2)}
.ls-nav-links{display:flex;gap:1.4rem;list-style:none}
.ls-nav-links a{color:var(--ls-text-2);text-decoration:none;font-family:var(--ls-font-mono);font-size:.8rem;letter-spacing:.02em;transition:color .15s}
.ls-nav-links a:hover{color:var(--ls-text)}
.ls-nav-links a[aria-current="page"]{color:var(--ls-text);font-weight:600}
.ls-nav-lang{display:flex;gap:.6rem;align-items:center;list-style:none}
.ls-nav-lang:empty,nav.lang:empty{display:none}
.ls-nav-lang a{color:var(--ls-text-2);text-decoration:none;font-family:var(--ls-font-mono);font-size:.78rem;letter-spacing:.02em;transition:color .15s}
.ls-nav-lang a:hover{color:var(--ls-text)}
.ls-nav-lang a[aria-current="true"]{color:var(--ls-text);font-weight:600}
@media(max-width:640px){
  /* Domain-only nav: three short links never need a collapsing menu — keep them
     inline and let them wrap on narrow screens (the hamburger was retired in
     WEB-NAV-TOGGLE-RETIRE). */
  .ls-nav-links{gap:1rem;flex-wrap:wrap}
}

/* --- Hero (ray-field host) --------------------------------- */
.ls-hero{position:relative;overflow:hidden;padding:6rem 2rem 4rem;max-width:960px;margin:0 auto}
.ls-hero>:not(.ls-rayfield){position:relative;z-index:1}
.ls-rayfield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ls-eyebrow{font-family:var(--ls-font-mono);font-size:.6875rem;letter-spacing:var(--ls-tracking-eyebrow);text-transform:uppercase;color:var(--ls-accent);margin-bottom:1rem}
.ls-hero h1{margin-bottom:1.3rem}
.ls-hero-sub{font-size:1.05rem;color:var(--ls-text-2);max-width:580px;margin-bottom:2rem;line-height:1.7}
.ls-ctas{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
/* thin single-accent line replaces the multi-hue streak bar */
.ls-streak-bar{display:block;height:2px;border-radius:2px;width:120px;margin:0 0 1.4rem;background:var(--ls-accent);opacity:.65}
.ls-streak-bar span{display:none}
/* the old decorative corner streak is retired — the ray-field carries it */
.ls-side-streak{display:none}

/* --- Buttons ----------------------------------------------- */
.ls-btn-primary,.ls-btn-outline{font-family:var(--ls-font-sans);font-weight:500;font-size:.9rem;padding:.7em 1.15em;border-radius:var(--ls-radius-sm);cursor:pointer;text-decoration:none;display:inline-block;transition:background var(--ls-dur) var(--ls-ease),border-color var(--ls-dur) var(--ls-ease)}
/* primary is high-contrast on its OWN terms (near-white) — never a raw accent fill,
   so it stays safe even for the vermilion site. */
.ls-btn-primary{background:#F2F3F5;color:#14171E;border:.5px solid transparent}
.ls-btn-primary:hover{background:#fff}
.ls-btn-outline{background:transparent;border:.5px solid var(--ls-border-strong);color:var(--ls-text)}
.ls-btn-outline:hover{background:var(--ls-surface-2);border-color:var(--ls-accent-border)}

/* --- Layout ------------------------------------------------ */
.ls-section{max-width:960px;margin:0 auto;padding:4rem 2rem}
.ls-section-label{font-family:var(--ls-font-mono);font-size:.6875rem;letter-spacing:var(--ls-tracking-eyebrow);text-transform:uppercase;color:var(--ls-accent);margin-bottom:.6rem}
.ls-divider{height:1px;background:var(--ls-border);margin:0 2rem}

/* --- Cards ------------------------------------------------- */
.ls-card,.ls-card-subtle,.ls-card-left{background:var(--ls-surface);border:1px solid var(--ls-border);border-radius:var(--ls-radius);padding:1.3rem;position:relative;overflow:hidden}
.ls-card-subtle{background:var(--ls-surface-2)}
.ls-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ls-accent);opacity:.55}
.ls-card h3,.ls-card-subtle h3,.ls-card-left h3{margin-bottom:.4rem}
.ls-card p,.ls-card-subtle p,.ls-card-left p{font-size:.85rem;color:var(--ls-text-2);line-height:1.6}
.ls-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.ls-card-left{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.3rem}
.ls-card-left::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ls-accent)}

/* --- Paths grid (org "Four Paths") ------------------------- */
.ls-paths-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}
.ls-path-card{background:var(--ls-surface);border:1px solid var(--ls-border);border-radius:var(--ls-radius);padding:1.3rem;text-align:left}
.ls-path-icon{width:28px;height:2px;border-radius:2px;margin:0 0 1rem;background:var(--ls-accent)}
.ls-path-card h3{margin-bottom:.4rem}
.ls-path-card p{font-size:.82rem;color:var(--ls-text-2);line-height:1.6}
.ls-about-accent{width:56px;height:2px;border-radius:2px;background:var(--ls-accent);opacity:.7;margin-bottom:1.5rem}

/* --- Badge / pill ------------------------------------------ */
.ls-badge{font-family:var(--ls-font-mono);font-size:.65rem;letter-spacing:.06em;padding:2px 8px;border-radius:4px;background:var(--ls-accent-bg);color:var(--ls-accent-glow);border:1px solid var(--ls-accent-border)}

/* --- Footer ------------------------------------------------ */
.ls-footer{border-top:1px solid var(--ls-border);padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.ls-footer p{font-family:var(--ls-font-mono);font-size:.72rem;color:var(--ls-text-faint)}
.ls-footer-links{display:flex;gap:1.2rem;list-style:none}
.ls-footer-links a{font-family:var(--ls-font-mono);font-size:.72rem;color:var(--ls-text-faint);text-decoration:none}
.ls-footer-links a:hover{color:var(--ls-text-2)}

/* --- Long-form prose (philosophy / spec intros) ------------ */
.ls-prose{max-width:680px;margin:0 auto;padding:4rem 2rem 2rem}
.ls-prose h1{margin-bottom:1.5rem}
.ls-prose h2{margin:2.5rem 0 .75rem}
.ls-prose h2:first-child{margin-top:0}
.ls-prose p,.ls-prose ul,.ls-prose ol{color:var(--ls-text-2);line-height:1.8;margin-bottom:1rem}
.ls-prose ul,.ls-prose ol{padding-left:1.5rem}
.ls-prose li{margin-bottom:.5rem}
.ls-prose .lead{font-size:1.05rem}
.ls-prose strong{color:var(--ls-text);font-weight:500}
.ls-prose em{color:var(--ls-accent);font-style:italic}
.ls-prose a{color:var(--ls-accent)}
.ls-prose a:hover{color:var(--ls-accent-glow)}
.ls-prose code{font-size:.85rem;padding:2px 6px;background:var(--ls-surface-2);border-radius:3px}
.ls-prose pre{background:var(--ls-surface);border:1px solid var(--ls-border);border-radius:var(--ls-radius-sm);padding:1rem 1.2rem;overflow-x:auto;font-size:.85rem;line-height:1.65;margin:.8rem 0 1rem}
.ls-prose pre code{background:none;padding:0}

/* --- Page nav (prev/next) ---------------------------------- */
.ls-page-nav{display:flex;justify-content:space-between;align-items:center;max-width:680px;margin:0 auto;padding:1rem 2rem 2rem}
.ls-page-nav a{font-size:.85rem;font-weight:500;color:var(--ls-text-2);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;transition:color .15s}
.ls-page-nav a:hover{color:var(--ls-accent)}

/* --- Mobile ------------------------------------------------ */
@media(max-width:640px){
  .ls-hero{padding:4rem 1.5rem 3rem}
  .ls-section{padding:2.5rem 1.5rem}
  .ls-prose{padding:2.5rem 1.5rem 1.5rem}
  .ls-page-nav{padding:1rem 1.5rem 1.5rem}
  .ls-card-grid{grid-template-columns:1fr}
  .ls-footer{flex-direction:column;text-align:center;gap:.5rem}
}