/* ============================================================================
   theme.css — PER-APP palette + brand overrides (the only design file a new
   site rewrites). tokens.css supplies structure; this supplies colour and the
   handful of brand-distinguishing knobs (--display serif, --radius, hero
   texture, chip style). Light + dark from the brand-doc palette columns.

   This is the umbrella (oomny) theme: the sky-blue cloud-and-person
   identity (#3aa7df) on clean cool neutrals. The 2026-06-24 redesign (Claude
   Design `oomny.dc.html`, owner-approved) reshapes the umbrella home — a sticky
   blur header, a centred halo hero, a "you're the customer, not the product"
   belief band, an app-plate grid with a 78px icon-mount + a mono index + a
   mono tag + per-app serif/sans names, and a compact one-line footer.

   COLOUR STAYS UPSTREAM. The redesign authored its own colour names
   (--ink/--soft/--soft-2/--line-soft); rather than re-define hexes here we
   ALIAS those names onto the palette tokens (--text/--text-soft/--line/…), so
   the colorset remains the single source of truth and light+dark both work
   through the existing token remap. A palette change cascades; nothing forks.

   Brand: oomny blue #3aa7df. Because the fill blue is only ~2.7:1 on white, the
   contract's --accent-text escape hatch carries a darkened blue tuned to AA
   (≥4.5:1) for links + small text; the bright blue stays for fills, the cloud
   mark and large accents.
   ============================================================================ */

/* ---- light ---- */
:root,
[data-theme="light"] {
  --bg:#f5f7f9; --bg-2:#e9eef2; --surface:#ffffff;
  --text:#14191d; --text-soft:#586670;
  --accent:#3aa7df; --accent-2:#5bb8e8; --accent-ink:#ffffff;
  --accent-text:#0e6f9e;                 /* darkened oomny blue, AA ≈5.2:1 on --bg / 5.5:1 on white */
  --line:#dde4e9;
  --verified:#2f8f5e; --caution:#b07d22; --caution-text:#8a6014;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
}

/* ---- dark (deep cool palette, faint blue atmosphere) ---- */
[data-theme="dark"] {
  --bg:#0b1117; --bg-2:#111a22; --surface:#16212b;
  --text:#eaf1f6; --text-soft:#94a5b0;
  --accent:#54b6ec; --accent-2:#76c6f0; --accent-ink:#07131c;
  --accent-text:#6cc3ef;                 /* AA ≈8.5:1 on --bg */
  --line:#23323f;
  --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
  --chip-bg:#1c2935;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
}

/* Follow the OS when the document hasn't pinned a theme via [data-theme]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0b1117; --bg-2:#111a22; --surface:#16212b;
    --text:#eaf1f6; --text-soft:#94a5b0;
    --accent:#54b6ec; --accent-2:#76c6f0; --accent-ink:#07131c;
    --accent-text:#6cc3ef;
    --line:#23323f;
    --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
    --chip-bg:#1c2935;
    --halo: radial-gradient(58% 55% at 80% -10%,
              color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
  }
}

/* ---- redesign colour ALIASES: the Claude-Design names → the palette tokens.
   The redesign HTML/CSS reads --ink/--soft/--soft-2/--line-soft; these resolve
   to the upstream colorset, so dark mode + a future palette edit just cascade. */
:root {
  --ink: var(--text);
  --soft: var(--text-soft);
  --soft-2: color-mix(in srgb, var(--text-soft) 78%, var(--bg));
  --line-soft: color-mix(in srgb, var(--line) 55%, var(--bg));
}

/* ============================================================================
   UMBRELLA REDESIGN (2026-06-24) — the components the home page + layout use.
   Page chrome (hero/why/section spacing) lives inline in the pages; this file
   carries the reusable bits: the sticky header, the app PLATE (so the
   build.mjs-generated cards stay class-based, not a wall of inline style), and
   the compact footer.
   ============================================================================ */

/* ---- sticky blur header ---- */
.site-head{position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line)}
.site-head .head-inner{max-width:68rem;margin-inline:auto;
  padding:.8rem clamp(1.15rem,4vw,2.5rem);display:flex;align-items:center;gap:1.1rem}
.site-head .brand{display:inline-flex;align-items:center;gap:.5rem;
  font-size:1.28rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.site-head .brand .cloud-mark{width:25px;height:25px;color:var(--accent);flex:none}
.site-head nav{margin-left:auto;display:flex;align-items:center;gap:1.15rem;
  font-size:.88rem;font-weight:550}
.site-head .navlink{color:var(--soft);text-decoration:none;transition:color var(--dur-1) var(--ease-out)}
.site-head .navlink:hover{color:var(--ink)}
/* The marketing site is English-only (owner decision 2026-06-26) — no language selector. The
   informational app-language flag row (.app-langs) lives in the byte-synced site.css; the umbrella
   hub renders no row (it speaks for no single app). Nothing language-related is duplicated here. */
@media (max-width:560px){.site-head .navlink{display:none}}

/* ---- hero (centred, halo atmosphere) ---- */
.u-hero{position:relative;overflow:hidden}
.u-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 52% at 50% -10%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 68%)}
.u-hero .wrap{position:relative;max-width:68rem;margin-inline:auto;
  padding:clamp(3.8rem,9vw,7rem) clamp(1.15rem,4vw,2.5rem) clamp(3rem,7vw,5rem);text-align:center}
.u-eyebrow{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-text)}
.u-eyebrow::before{content:"";width:1.7rem;height:1px;background:var(--accent-text)}
.u-hero h1{margin:1.25rem auto .95rem;max-width:15ch;
  font-size:clamp(2.6rem,6.4vw,4.4rem);line-height:1.03;letter-spacing:-.027em;font-weight:680;
  color:var(--ink);text-wrap:balance}
.u-hero .lede{margin:0 auto;max-width:40ch;
  font-size:clamp(1.1rem,2.3vw,1.32rem);line-height:1.5;color:var(--soft)}
.u-hero-actions{margin-top:2rem;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;align-items:center}
.u-hero .note{margin-top:1.5rem;font-size:.9rem;color:var(--soft)}
.u-hero .note b{color:var(--ink);font-weight:650}

/* redesign buttons (pill, primary fill + ghost) */
.u-btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:650;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:var(--radius-pill);text-decoration:none;border:1px solid transparent;
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2),border-color var(--dur-2),color var(--dur-2)}
.u-btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 22px -12px var(--accent)}
.u-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px -14px var(--accent)}
.u-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);padding-inline:1.4rem;font-weight:600}
.u-btn-ghost:hover{border-color:var(--accent-text);color:var(--accent-text)}

/* ---- belief band ("you're the customer, not the product") ---- */
.u-why{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.u-why .wrap{max-width:68rem;margin-inline:auto;padding:clamp(2.6rem,6vw,4.2rem) clamp(1.15rem,4vw,2.5rem)}
.u-why-head{text-align:center;max-width:44rem;margin-inline:auto}
.u-kicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft-2)}
.u-why-claim{margin:.9rem 0 0;font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.22;
  letter-spacing:-.018em;font-weight:640;color:var(--ink);text-wrap:balance}
.u-why-claim b{color:var(--accent-text);font-weight:inherit}
.u-why-sub{margin:.85rem auto 0;max-width:34rem;color:var(--soft);font-size:1.02rem;line-height:1.55}
.u-values{margin-top:clamp(1.8rem,4vw,2.6rem);display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:.5rem 1.15rem;font-size:.95rem}
.u-values span{font-weight:600;color:var(--ink)}
.u-values .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.55;flex:none}

/* ---- apps section ---- */
.u-apps{max-width:68rem;margin-inline:auto;
  padding:clamp(3.2rem,7vw,5.2rem) clamp(1.15rem,4vw,2.5rem) clamp(3.5rem,8vw,6rem)}
.u-apps-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--line);padding-bottom:1.15rem;margin-bottom:clamp(1.4rem,3vw,2rem)}
.u-apps-head h2{margin-top:.5rem;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.06;
  letter-spacing:-.022em;font-weight:660;color:var(--ink)}
.u-apps-count{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--soft-2);
  white-space:nowrap;padding-bottom:.4rem}

/* the app grid + PLATE (build.mjs renders one .plate per app, class-based) */
.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.15rem)}
@media (max-width:860px){.apps-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.apps-grid{grid-template-columns:1fr}}
.plate{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:clamp(1.4rem,2.4vw,1.75rem);color:inherit;text-decoration:none;
  box-shadow:0 1px 2px -1px color-mix(in srgb,var(--ink) 6%,transparent);
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.plate:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
  box-shadow:0 18px 40px -26px color-mix(in srgb,var(--ink) 50%,transparent)}
.plate-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.05rem}
.mount{display:grid;place-items:center;width:78px;height:78px;border-radius:20px;background:var(--bg-2);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 6px color-mix(in srgb,var(--ink) 6%,transparent);
  transition:box-shadow var(--dur-1) var(--ease-out)}
.plate:hover .mount{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,var(--line)),
  inset 0 2px 6px color-mix(in srgb,var(--ink) 7%,transparent)}
.mount img{width:54px;height:54px;border-radius:13px;
  box-shadow:0 4px 12px -6px color-mix(in srgb,var(--ink) 50%,transparent)}
.plate-num{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--soft-2);padding-top:.3rem}
.plate-tag{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-text)}
.plate-name{margin:.12rem 0 .15rem;font-size:1.34rem;line-height:1.05;color:var(--ink)}
.plate-desc{margin:.4rem 0 0;color:var(--soft);font-size:.95rem;line-height:1.5;text-wrap:pretty}
.plate-spacer{flex:1;min-height:1rem}
.plate-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--line)}
.plate-price{font-weight:700;color:var(--ink);font-size:1.06rem}
.go{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-text);
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.go svg{width:16px;height:16px}
.plate:hover .go{background:var(--accent);color:var(--accent-ink);transform:translateX(2px)}
/* per-app name font (serif/sans) — emitted by build.mjs into {{appCardStyles}} below the grid rules */

/* ---- compact footer (redesign) ---- */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:0}
.foot-bar{max-width:68rem;margin-inline:auto;padding:1.7rem clamp(1.15rem,4vw,2.5rem);
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;justify-content:space-between;
  font-size:.85rem;color:var(--soft)}
.foot-id{display:inline-flex;align-items:center;gap:.5rem}
.foot-id .cloud-mark{width:21px;height:21px;color:var(--accent);flex:none}
.foot-id .who{color:var(--ink)}
.foot-id .who b{font-weight:700;letter-spacing:-.02em}
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem}
.foot-nav a{color:var(--soft);text-decoration:none;transition:color var(--dur-1) var(--ease-out)}
.foot-nav a:hover{color:var(--accent-text)}
.foot-nav a.mail{color:var(--accent-text);font-weight:600}
@media (max-width:700px){.foot-bar{justify-content:flex-start;gap:1.1rem}}