/* ============================================================================
   Selmo Labs — shared design system
   Served at /shared/glass.css on all three sites, so they stay one thing.

   The rule that keeps this from turning to mud: glass is for the navigation
   and control layer — the bar, buttons, chips, interactive tiles. Text you
   actually read sits on a quiet surface. When everything is glass, nothing
   has hierarchy.

   Second rule: glass cannot sample glass. A backdrop-filter inside another
   backdrop-filter samples its parent's already-composited output, which goes
   grey and flat. So .glass has the blur; .glass-inset is for nesting and
   deliberately has none.
   ============================================================================ */

/* Lufga's @font-face rules live in /shared/fonts.css, loaded alongside this. */

/* ============================================================================
   Tokens
   ============================================================================ */

:root {
  /* Warm neutrals, pulled from the reference plates — sand and stone rather
     than grey. Pure grey next to this palette reads as a mistake. */
  --ink:        #1B1A15;
  --ink-2:      #55544A;
  --ink-3:      #78776A;
  --ground:     #E8E5DB;
  --ground-2:   #DCD8CB;
  --surface:    #FAF8F1;

  /* One accent: deep moss, straight out of the plates. */
  --accent:     #4F6122;
  --accent-ink: #3C4B18;
  --accent-soft: rgba(79, 97, 34, 0.10);

  /* Glass */
  --glass-fill:     rgba(255, 253, 246, 0.46);
  --glass-fill-2:   rgba(255, 253, 246, 0.32);
  --glass-blur:     30px;
  --glass-hairline: rgba(255, 255, 250, 0.58);
  --glass-rim:      rgba(255, 255, 252, 0.95);
  --glass-bloom:    rgba(255, 255, 250, 0.62);
  --glass-shadow:   rgba(42, 38, 24, 0.18);
  --glass-solid:    #F2F0E8;   /* reduced-transparency fallback */

  /* The light behind the glass — sage, sand, moss, khaki. Not decoration:
     this is what the panels refract, and without it they are grey boxes. */
  --bloom-a: rgba(176, 184, 148, 0.56);
  --bloom-b: rgba(226, 202, 154, 0.62);
  --bloom-c: rgba(134, 148, 82,  0.24);
  --bloom-d: rgba(196, 176, 136, 0.46);
  --plate-opacity: 0.20;

  /* Radii deliberately vary by role: pills for controls, squircle for
     surfaces, tight for inputs. Not one radius on everything. */
  --r-pill: 999px;
  --r-lg:   28px;
  --r-md:   18px;
  --r-sm:   12px;

  --font-display: 'Lufga', 'Urbanist', ui-sans-serif, system-ui, sans-serif;
  --font-ui:      'Urbanist', 'Lufga', ui-sans-serif, system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shell: 76rem;
}

[data-theme='dark'] {
  --ink:        #F1EFE4;
  --ink-2:      #A9A796;
  --ink-3:      #82806F;
  --ground:     #0A0B08;
  --ground-2:   #12140E;
  --surface:    #191B13;

  --accent:     #C2D68C;
  --accent-ink: #D8E8AC;
  --accent-soft: rgba(194, 214, 140, 0.13);

  --glass-fill:     rgba(255, 253, 240, 0.06);
  --glass-fill-2:   rgba(255, 253, 240, 0.04);
  --glass-hairline: rgba(255, 253, 240, 0.13);
  --glass-rim:      rgba(255, 253, 240, 0.44);
  --glass-bloom:    rgba(255, 253, 240, 0.10);
  --glass-shadow:   rgba(0, 0, 0, 0.6);
  --glass-solid:    #191B13;

  --bloom-a: rgba(126, 142, 72,  0.30);
  --bloom-b: rgba(212, 188, 141, 0.14);
  --bloom-c: rgba(70, 84, 44,    0.34);
  --bloom-d: rgba(150, 134, 100, 0.12);
  --plate-opacity: 0.10;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink:        #F1EFE4;
    --ink-2:      #A9A796;
    --ink-3:      #82806F;
    --ground:     #0A0B08;
    --ground-2:   #12140E;
    --surface:    #191B13;

    --accent:     #C2D68C;
    --accent-ink: #D8E8AC;
    --accent-soft: rgba(194, 214, 140, 0.13);

    --glass-fill:     rgba(255, 253, 240, 0.06);
    --glass-fill-2:   rgba(255, 253, 240, 0.04);
    --glass-hairline: rgba(255, 253, 240, 0.13);
    --glass-rim:      rgba(255, 253, 240, 0.44);
    --glass-bloom:    rgba(255, 253, 240, 0.10);
    --glass-shadow:   rgba(0, 0, 0, 0.6);
    --glass-solid:    #191B13;

    --bloom-a: rgba(126, 142, 72,  0.30);
    --bloom-b: rgba(212, 188, 141, 0.14);
    --bloom-c: rgba(70, 84, 44,    0.34);
    --bloom-d: rgba(150, 134, 100, 0.12);
    --plate-opacity: 0.10;
  }
}

/* ============================================================================
   Base
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A 48px blur of one of the reference plates, inlined at under 1KB. At that
   size nothing of the source image survives as content — it is a colour mesh —
   and it gives the glass something with texture to refract instead of a
   mathematically smooth gradient. */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: var(--plate-opacity);
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCABEADADASIAAhEBAxEB/8QAGwAAAQUBAQAAAAAAAAAAAAAABgADBAUHAgH/xAAnEAACAQMEAQMFAQAAAAAAAAABAgMABBEFEiExBhMiQQcUI1FhQv/EABkBAQEBAQEBAAAAAAAAAAAAAAIDAAQBBf/EABwRAAICAwEBAAAAAAAAAAAAAAABAhESITEDMv/aAAwDAQACEQMRAD8AHZQ80JMfC/ujXwDUFhhNtcHafgn5oGnkNvhFPtp5ZrqNBJCSR8EV8a3FnSjYb4GW2cRnJxxQqS6OVcEYp7xLU57i1QXD5ccYNX2pRwLDveMHPyKunlsaYOuwVQSe6stOjAjLH5qFe2W145Fb8feKsLE7YG4rGMjl9VgfWQgf0VK0289O3ZNu4DqjHXdMjuLR9iAOBkYFBtnAzFogNu085qE1aoFYsvNCuJpLyIQgg7hnFaBdSP68MbLmNl5qg8Ogt0tztUesOzRDPKFAYjJHVU81SEio1opBbvcSSEInS0NRebiIbFgyo+akec3jzQpAjDJPIFBjWxRfdWcqYZNmqRWU8oBfCj+03P47aOWOAHbsirWZsDOeK4hfcCSeqWKKPZR6Hps9hqUiMSYj0audUYRoSGAO3jmuNSvPtbRpP9DqhSa9OTLcykk9Lmi5KOgg5eXT/eSmbLNuOM1Feb1OW6/VESw2uoFyNob+0OarafaXGxScfup9A1RprX5k4C8VIiOQCrcVXEqq8U7DMVHt5FWoqS9WthPp0mTyBkVnNxcb51VwSoOKMNe16Kz06RCwEjDAFDfh8K6lqBMwDInu5oyjbQJPdHVtoF7LdCaAmOEjIzT2oeO3e7exEtGVxKB+OIYxXEcTMvuPdetLhsStk4YgdV4zskDlT0KVKkhmWateT3F/L6shbDcUSfTyZxczgHjFKlSZzx+g9BJkGalEkDApUqC6XP/Z");
  background-size: cover;
  background-position: center;
  filter: saturate(125%);
}

/* The light field. Fixed, so glass keeps refracting something as you scroll. */
body::before {
  content: '';
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(34vmax 26vmax at 80% -2%,  var(--bloom-b), transparent 64%),
    radial-gradient(40vmax 32vmax at 0% 10%,   var(--bloom-a), transparent 62%),
    radial-gradient(46vmax 38vmax at 74% 44%,  var(--bloom-c), transparent 64%),
    radial-gradient(38vmax 30vmax at 16% 86%,  var(--bloom-d), transparent 60%),
    radial-gradient(52vmax 40vmax at 44% 26%,  var(--bloom-a), transparent 72%);
}

/* Grain, to stop the gradients banding on wide screens. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

[data-theme='dark'] body::after { opacity: 0.22; mix-blend-mode: overlay; }

::selection { background: var(--accent); color: #fff; }
[data-theme='dark'] ::selection { color: #08130F; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--ground);
  padding: 0.8rem 1.1rem;
  border-radius: var(--r-sm);
  z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

/* ============================================================================
   Type
   ============================================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.5rem, 4.6vw, 3.95rem);
  max-width: 15ch;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.display em {
  font-style: normal;
  font-weight: 300;
  color: var(--ink-2);
}

h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.02em; font-weight: 600; }

p { margin: 0; }

.lede {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
  font-weight: 400;
}

.micro {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
a:hover { text-decoration-color: currentColor; }

/* ============================================================================
   Glass
   ============================================================================ */

.glass {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-radius: var(--r-lg);
  box-shadow:
    0 22px 48px -26px var(--glass-shadow),
    0 3px 10px -6px var(--glass-shadow);
  isolation: isolate;
}

/* The rim. A gradient border, brighter where the light is — this is the
   difference between "a blurred box" and something that reads as a lens. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    142deg,
    var(--glass-rim) 0%,
    var(--glass-hairline) 26%,
    transparent 52%,
    var(--glass-hairline) 78%,
    var(--glass-rim) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Specular bloom, top-left, matching the bloom in the background field. */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 90% at 10% -10%, var(--glass-bloom), transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.glass > * { position: relative; z-index: 2; }

/* For glass sitting inside glass. No blur of its own, on purpose. */
.glass-inset {
  position: relative;
  background: var(--glass-fill-2);
  border: 1px solid var(--glass-hairline);
  border-radius: var(--r-md);
}

/* ============================================================================
   Nav
   ============================================================================ */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 1rem 0 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-radius: var(--r-pill);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
}
.brand span { color: var(--ink-3); font-weight: 400; }
.brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
  align-self: center;
  margin-right: 0.1rem;
  color: var(--ink);
}

.nav-links { display: flex; align-items: center; gap: 0.25rem; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0 0.95rem;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--glass-fill-2); }
.nav-link[aria-current='page'] { color: var(--ink); background: var(--glass-fill-2); }
.nav-link .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.nav-link.is-soon { color: var(--ink-3); }
.nav-link.is-soon .dot { background: var(--ink-3); opacity: 0.6; }

.theme-toggle {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--glass-hairline);
  background: var(--glass-fill-2);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.18s var(--ease), transform 0.18s var(--ease);
}
.theme-toggle:hover { color: var(--ink); transform: rotate(-18deg); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .moon { display: none; }
[data-theme='dark'] .theme-toggle .moon { display: block; }
[data-theme='dark'] .theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .moon { display: block; }
  :root:not([data-theme='light']) .theme-toggle .sun { display: none; }
}

/* ============================================================================
   Buttons
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.btn-primary {
  background: var(--ink);
  color: var(--ground);
  box-shadow: 0 12px 26px -14px var(--glass-shadow);
}
.btn-primary:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--accent) 55%, transparent);
}
[data-theme='dark'] .btn-primary:hover { color: #06120F; }

.btn-glass {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    0 0 0 1px var(--glass-hairline),
    0 14px 28px -18px var(--glass-shadow);
}
.btn-glass:hover { box-shadow:
    inset 0 1px 0 var(--glass-rim),
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 18px 34px -18px var(--glass-shadow);
  color: var(--accent-ink);
}

.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }

/* ============================================================================
   Utility
   ============================================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 30px;
  padding: 0 0.8rem;
  border-radius: var(--r-pill);
  background: var(--glass-fill-2);
  border: 1px solid var(--glass-hairline);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.rule { height: 1px; background: var(--glass-hairline); border: 0; margin: 0; }

footer {
  padding: 3rem 0 3.5rem;
  color: var(--ink-3);
  font-size: 0.85rem;
}
.foot-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; }
.foot-row a { text-decoration: none; }
.foot-row a:hover { color: var(--ink); }

/* ============================================================================
   Accessibility and fallbacks

   Glass is a decoration over meaning. When the visitor has asked for less of
   it, it goes away entirely rather than degrading into a grey smear.
   ============================================================================ */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .btn-glass { background: var(--glass-solid); }
}

@media (prefers-reduced-transparency: reduce) {
  html::before { opacity: 0.12; }
  .glass, .btn-glass {
    background: var(--glass-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass::after { display: none; }
  body::before { opacity: 0.45; }
}

@media (prefers-contrast: more) {
  :root { --ink-2: #2C333D; --ink-3: #3C444F; --glass-fill: rgba(255,255,255,0.86); }
  [data-theme='dark'] { --ink-2: #D2D9E4; --ink-3: #BCC5D2; --glass-fill: rgba(20,24,31,0.92); }
  .glass::before { padding: 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 46rem) {
  .shell { width: min(100% - 1.75rem, var(--shell)); }
  .nav { padding-left: 1rem; }
  .brand span { display: none; }
}