/* Omarchy.Fans design system. Shared by the marketing pages and the Cloud app.
   Rules (from omarchy.org): sharp corners (radius 0), 1px rings instead of shadows, monospace-first,
   the theme picks every colour through --t-* tokens (see themes.css), sparse uppercase, keyboard hints. */
@import url("themes.css");

:root {
  --font-mono: "JetBrainsMono Nerd Font", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 3.5rem;
  --maxw: 72rem;
  --radius: 0px;
  --ring: 0 0 0 1px color-mix(in oklab, var(--t-text) 12%, transparent);
  --ring-strong: 0 0 0 1px var(--t-brand);
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-brand-soft: color-mix(in oklab, var(--t-brand) 14%, transparent);
}
/* Fallback palette = tokyo-night, ONLY when no theme is set. Scoped with :not([data-theme]) so it never
   outranks the [data-theme=…] blocks from themes.css (same specificity as :root would win by source order). */
html:not([data-theme]) {
  --t-bg-deep:#0e0e14;--t-bg:#1a1b26;--t-surface:#24283b;--t-surface-2:#13141c;--t-border:#414868;--t-text:#c0caf5;--t-text-2:#a9b1d6;--t-muted:#565f89;--t-brand:#7aa2f7;--t-brand-ink:#0e0e14;--t-selection:#292e42;--t-red:#f7768e;--t-yellow:#e0af68;--t-orange:#eb927b;--t-green:#9ece6a;--t-cyan:#449dab;--t-blue:#7aa2f7;--t-magenta:#ad8ee6;
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  background: var(--t-bg); color: var(--t-text);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
::selection { background: var(--t-selection); color: var(--t-text); }
a { color: var(--t-brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
h1,h2,h3,h4 { font-family: var(--font-mono); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 .5em; color: var(--t-text); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; color: var(--t-text-2); }
code, kbd, pre, .mono { font-family: var(--font-mono); }
code { background: var(--t-surface); padding: .1em .35em; font-size: .92em; }
pre { background: var(--t-bg-deep); color: var(--t-text); padding: 1rem 1.25rem; overflow-x: auto; box-shadow: var(--ring); font-size: .875rem; line-height: 1.5; }
pre code { background: none; padding: 0; }
kbd { display: inline-block; padding: 0 .4em; border: 1px solid var(--t-border); border-bottom-width: 2px; font-size: .8em; line-height: 1.6; color: var(--t-text); background: var(--t-surface); }
hr { border: 0; border-top: 1px solid var(--t-border); margin: 2rem 0; }
img, svg, video { max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--t-border); vertical-align: top; }
th { font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--t-muted); font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 4.5rem 0; }
.section.tight { padding: 2.5rem 0; }
.section.deep { background: var(--t-bg-deep); }
.section.surface { background: var(--t-surface-2); }
.grid { display: grid; gap: 1.25rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--t-muted); }
.brand { color: var(--t-brand); }
.small { font-size: .875rem; }
.eyebrow { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--t-brand); margin-bottom: .75rem; display: block; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: color-mix(in oklab, var(--t-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--t-border); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 1.25rem; }
.nav .logo { font-family: var(--font-mono); font-weight: 800; letter-spacing: -.02em; color: var(--t-text); display: inline-flex; align-items: center; gap: .5rem; }
.nav .logo:hover { text-decoration: none; }
.nav .logo .dot { width: .6rem; height: .6rem; background: var(--t-brand); display: inline-block; }
.nav .logo .fans { color: var(--t-brand); }
.nav nav { display: flex; gap: 1rem; margin-left: auto; align-items: center; }
.nav nav a { color: var(--t-text-2); font-family: var(--font-mono); font-size: .875rem; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--t-text); text-decoration: none; }
.nav .theme-hint { font-family: var(--font-mono); font-size: .75rem; color: var(--t-muted); display: inline-flex; gap: .4rem; align-items: center; cursor: pointer; user-select: none; }
@media (max-width: 720px) { .nav nav a.hide-sm { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.1rem; font-family: var(--font-mono); font-size: .9rem; font-weight: 600; border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-text); cursor: pointer; line-height: 1.2; text-decoration: none; transition: transform .12s var(--ease), background .15s var(--ease); white-space: nowrap; }
.btn:hover { text-decoration: none; transform: translateY(-1px); background: var(--t-selection); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--t-brand); color: var(--t-brand-ink); border-color: var(--t-brand); }
.btn.primary:hover { filter: brightness(1.08); background: var(--t-brand); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: var(--t-red); color: var(--t-red); background: transparent; }
.btn.danger:hover { background: color-mix(in oklab, var(--t-red) 15%, transparent); }
.btn.sm { padding: .4rem .7rem; font-size: .8rem; }
.btn.lg { padding: .9rem 1.5rem; font-size: 1rem; }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }

/* cards & pills */
.card { background: var(--t-surface); box-shadow: var(--ring); padding: 1.5rem; position: relative; }
.card.deep { background: var(--t-bg-deep); }
.card.hi { box-shadow: var(--ring-strong); }
.card h3 { margin-top: 0; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .02em; border: 1.5px solid var(--c, var(--t-brand)); color: var(--c, var(--t-brand)); background: color-mix(in oklab, var(--c, var(--t-brand)) 16%, transparent); white-space: nowrap; }
.pill.green { --c: var(--t-green); } .pill.red { --c: var(--t-red); } .pill.yellow { --c: var(--t-yellow); }
.pill.magenta { --c: var(--t-magenta); } .pill.cyan { --c: var(--t-cyan); } .pill.muted { --c: var(--t-muted); } .pill.orange { --c: var(--t-orange); }
.dot { width: .55rem; height: .55rem; display: inline-block; background: var(--c, var(--t-brand)); }
.dot.green { --c: var(--t-green); } .dot.red { --c: var(--t-red); } .dot.yellow { --c: var(--t-yellow); } .dot.muted { --c: var(--t-muted); }
.dot.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* forms */
label { display: block; font-family: var(--font-mono); font-size: .8rem; color: var(--t-muted); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .06em; }
input, select, textarea { width: 100%; font: inherit; font-family: var(--font-mono); font-size: .9rem; padding: .6rem .75rem; background: var(--t-bg-deep); color: var(--t-text); border: 1px solid var(--t-border); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--t-brand); box-shadow: var(--ring-strong); }
textarea { min-height: 7rem; resize: vertical; }
.field { margin-bottom: 1rem; }
.field .help { font-size: .8rem; color: var(--t-muted); margin-top: .3rem; }
select[data-theme-picker] { width: auto; padding: .3rem .5rem; font-size: .8rem; }

/* terminal window chrome */
.term { background: var(--t-bg-deep); box-shadow: var(--ring); font-family: var(--font-mono); font-size: .85rem; color: var(--t-text); }
.term .bar { display: flex; gap: .4rem; align-items: center; padding: .5rem .75rem; border-bottom: 1px solid var(--t-border); color: var(--t-muted); font-size: .75rem; }
.term .bar i { width: .6rem; height: .6rem; display: inline-block; }
.term .bar i:nth-child(1) { background: var(--t-red); } .term .bar i:nth-child(2) { background: var(--t-yellow); } .term .bar i:nth-child(3) { background: var(--t-green); }
.term .bar span { margin-left: auto; }
.term pre { margin: 0; box-shadow: none; background: transparent; padding: 1rem 1.25rem; white-space: pre-wrap; }
.term .p { color: var(--t-green); } .term .c { color: var(--t-muted); } .term .k { color: var(--t-brand); } .term .w { color: var(--t-yellow); } .term .m { color: var(--t-magenta); }
.cursor::after { content: "▍"; color: var(--t-brand); animation: pulse 1s steps(2) infinite; }

/* misc */
.logo-mark { font-family: var(--font-mono); font-weight: 800; font-size: clamp(2.5rem, 8vw, 5.5rem); letter-spacing: -.04em; line-height: 1; }
.logo-mark .fans { color: var(--t-brand); }
.ascii { font-family: var(--font-mono); white-space: pre; line-height: 1.05; color: var(--t-green); font-size: clamp(.35rem, 1.2vw, .8rem); overflow-x: auto; }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.check { color: var(--t-green); font-family: var(--font-mono); }
.cross { color: var(--t-muted); font-family: var(--font-mono); }
.progress { height: .5rem; background: var(--t-bg-deep); box-shadow: var(--ring); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--t-brand); transition: width .3s var(--ease); }
.progress.warn > i { background: var(--t-yellow); } .progress.over > i { background: var(--t-red); }
.toast { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; background: var(--t-surface); box-shadow: var(--ring-strong); padding: .75rem 1rem; font-family: var(--font-mono); font-size: .85rem; max-width: 24rem; }
.toast.err { box-shadow: 0 0 0 1px var(--t-red); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
footer.site { border-top: 1px solid var(--t-border); padding: 3rem 0; font-size: .875rem; color: var(--t-muted); }
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; }
footer.site h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--t-muted); margin-bottom: .6rem; }
footer.site a { color: var(--t-text-2); display: block; margin-bottom: .35rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }