/* ───────────────────────────────────────────────────────────────────────
   AIOOS design language — the single source of truth (lang.css)

   Grows block by block, ground-up. Two parents feed it: the shipped /app/
   "Presence" skin (dark) and the aioos.ai landing "Liquid Glass" skin
   (light, white/blue).

   LAW: specimens and product surfaces use ONLY the semantic tokens in the
   DECIDED block. Parent tokens further down are raw material for future
   decisions — never reference them directly in a specimen.

   Theming: the DECIDED block doubles as [data-theme="light"]. When the
   dark mapping is decided later, it lands as [data-theme="dark"] remapping
   the SAME semantic names — switching the whole language is one attribute.

   Specimens: https://aioos.ai/v1/lab/design-lang/  ·  source: specs/design-lang/
   ─────────────────────────────────────────────────────────────────────── */

/* fonts — the woff2s the product actually ships (copied from vox-app).
   NOTE: "Geist" (the album's intended UI sans) has no file on disk —
   Inter is what really renders. */
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fustat'; src: url('assets/fonts/fustat-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('assets/fonts/instrumentserif-italic-latin.woff2') format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* ════ DECIDED — semantic tokens (the law) ═══════════════════════════════
   Substrate: DECIDED 2026-06-12 (Amir) — white/blue Liquid Glass, values
   quoted VERBATIM from the deployed landing (via the console.css
   extraction of aioos.ai). Everything is built light-first; dark comes
   later as a [data-theme="dark"] remap. */
:root,
[data-theme="light"] {
  /* the page canvas — near-white + the 3-stop blue/cyan mesh */
  --page-bg:
    radial-gradient(60% 50% at 18% -4%,  rgba(96, 177, 255, .12), transparent 60%),
    radial-gradient(52% 44% at 90% 10%,  rgba(34, 211, 238, .07), transparent 62%),
    radial-gradient(66% 58% at 50% 120%, rgba(45, 108, 246, .06), transparent 60%),
    #FCFDFF;

  /* ink — text on light */
  --ink: #0A1222;
  --ink-soft: #1E2D49;
  --ink-2: #46546B;
  --muted: #64748F;

  /* accent — brand blue */
  --accent: #0084FF;
  --accent-strong: #0B63E0;     /* AA-tuned CTA */
  --glow-1: #60B1FF;
  --glow-2: #319AFF;

  /* materials — frosted white glass, blue-tinted depth (landing verbatim) */
  --card: rgba(255, 255, 255, .62);
  --card-hover: rgba(255, 255, 255, .82);
  --glass: rgba(255, 255, 255, .5);
  --glass-strong: rgba(255, 255, 255, .7);
  --border-card: rgba(255, 255, 255, .85);
  --border-glass: rgba(255, 255, 255, .7);
  --hairline: rgba(0, 0, 0, .07);
  --shadow-card: inset 0 3px 4px rgba(255, 255, 255, .5), 0 22px 44px -22px rgba(20, 50, 110, .45);
  --shadow-glass: inset 0 2px 3px rgba(255, 255, 255, .55), 0 8px 20px -14px rgba(20, 50, 110, .4);
  --shadow-cta: inset 0 4px 4px 0 rgba(255, 255, 255, .35), 0 18px 36px -16px rgba(0, 132, 255, .85);

  /* glass blur — landing verbatim (backdrop-filter) */
  --blur-glass: 20px;   /* chrome, pills, panes */
  --blur-card: 22px;    /* cards */

  /* scrim — behind panes/modals */
  --scrim: rgba(10, 18, 34, .32);

  /* signature material — desaturated fractal-noise grain tile (landing verbatim).
     Usage: fixed overlay, soft-light, 160px tile @ .72 (retina 110px @ .58). */
  --grain: 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='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* type stacks — roles DECIDED 2026-06-12 via 0-foundation/type.html:
     Fustat = display/headings · Inter = body/UI (Geist retired — no file
     ever shipped) · Instrument Serif = ITALIC editorial accent only ·
     JetBrains Mono = labels/data. */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-head: 'Fustat', var(--font-body);
  --font-accent: 'Instrument Serif', Georgia, serif;  /* italic editorial accent */
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* space scale — landing verbatim. Base grid 4px.
     Roles DECIDED via 0-foundation/space.html: 2/3 = gaps inside an element ·
     4/5/6 = padding + gaps between related items · 8/10/12 = section air. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* radius scale — landing verbatim.
     Roles: sm = chips/tags · md = inputs/buttons · lg = cards ·
     xl = large surfaces/modals · pill = pills/badges. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* type scale */
  --fs-display: 34px;   /* Fustat 600, line-height 1.15, tracking -0.01em */
  --fs-title: 22px;     /* Fustat 600, 1.25 */
  --fs-subtitle: 17px;  /* Fustat 600, 1.4 — card/section heads */
  --fs-body: 15px;      /* Inter 400, 1.6 */
  --fs-small: 13px;     /* Inter 400, 1.55 — secondary copy */
  --fs-label: 11px;     /* Mono 600, uppercase, tracking .14em — kickers/badges */
}

/* ════ NIGHT — the [data-theme="dark"] remap (DECIDED 2026-06-13, Amir) ═══
   The same language after dark. The canvas stays in the landing's blue-ink
   family (#0A1222 deepened — NOT the Presence violet); accent blue + glow
   hues are the brand and do not move. Glass flips from frosted-white to
   deep-ink glass: white surfaces become low-alpha ink layers, hairlines and
   inset highlights move to the white-alpha ladder, drop shadows go black.
   Specimens adopt via <body data-theme="dark">; the app mirrors the resolved
   theme onto the substrate element (RoomsConsole). Scale/type/space tokens
   are theme-invariant and stay in the light block. */
[data-theme="dark"] {
  --page-bg:
    radial-gradient(60% 50% at 18% -4%,  rgba(49, 154, 255, .14), transparent 60%),
    radial-gradient(52% 44% at 90% 10%,  rgba(34, 211, 238, .08), transparent 62%),
    radial-gradient(66% 58% at 50% 120%, rgba(45, 108, 246, .10), transparent 60%),
    #070D1A;

  /* ink — text on night */
  --ink: #E9F0FC;
  --ink-soft: #C7D3E8;
  --ink-2: #93A5C4;
  --muted: #7589A8;

  /* accent — unchanged (brand): --accent / --accent-strong / --glow-1 / --glow-2 */

  /* materials — deep-ink glass */
  --card: rgba(15, 25, 47, .62);
  --card-hover: rgba(21, 33, 60, .82);
  --glass: rgba(13, 22, 40, .5);
  --glass-strong: rgba(16, 27, 50, .7);
  --border-card: rgba(255, 255, 255, .12);
  --border-glass: rgba(255, 255, 255, .10);
  --hairline: rgba(255, 255, 255, .08);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 44px -22px rgba(0, 0, 0, .65);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 20px -14px rgba(0, 0, 0, .55);
  --shadow-cta: inset 0 4px 4px 0 rgba(255, 255, 255, .16), 0 18px 36px -16px rgba(0, 132, 255, .6);

  --scrim: rgba(2, 6, 14, .55);
}

/* night structurals — the few literals the remap can't reach */
[data-theme="dark"]::before { opacity: .45; }
[data-theme="dark"] .glow.a { opacity: .22; }
[data-theme="dark"] .glow.b { opacity: .15; }
[data-theme="dark"] .glow.c { opacity: .09; }
[data-theme="dark"] .toggle .track { background: rgba(255, 255, 255, .14); }
[data-theme="dark"] .toggle .track::after { box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
[data-theme="dark"] select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2393A5C4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-theme="dark"] .pane { box-shadow: -24px 0 48px -24px rgba(0, 0, 0, .6); }

/* ── composed layers (DECIDED) — the substrate as reusable classes ──
   Approved 2026-06-12 (Amir) via 0-foundation/substrate.html. Any page of
   the language starts as <body class="substrate"> + the three .glow orbs. */
.substrate {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.substrate::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain); background-size: 160px 160px;
  mix-blend-mode: soft-light; opacity: .72;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .substrate::before { background-size: 110px 110px; opacity: .58; }
}
.glow { position: fixed; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0; }
.glow.a { width: 520px; height: 440px; left: -200px; top: -200px; background: var(--glow-1); opacity: .40; }
.glow.b { width: 420px; height: 400px; left: 40px;    top: -230px; background: var(--glow-2); opacity: .28; }
.glow.c { width: 440px; height: 440px; right: -200px; top: 60px;   background: var(--glow-1); opacity: .16; }

/* ── atoms (level 1) — buttons & pills ──────────────────────────────────
   Composed ONLY from foundation tokens. Specimen: 1-atoms/buttons.html. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  text-decoration: none; cursor: pointer; border: 0;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.btn.small { height: 32px; padding: 0 var(--space-4); font-size: var(--fs-small); }
.btn-primary { background: var(--accent-strong); color: #fff; box-shadow: var(--shadow-cta); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary[disabled], .btn-primary.is-disabled { background: var(--muted); box-shadow: none; cursor: default; transform: none; }
.btn-ghost {
  background: var(--glass-strong); color: var(--ink);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  box-shadow: var(--shadow-glass);
}
.btn-ghost:hover { background: var(--card-hover); }
.btn-quiet { background: transparent; color: var(--accent-strong); height: auto; padding: 0 var(--space-1); }
.btn-quiet:hover { text-decoration: underline; }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 28px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--glass-strong); border: 1px solid var(--border-glass);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  box-shadow: var(--shadow-glass);
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
/* status colors are NOT in the language yet — the dot stays accent until decided */
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 24px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--border-glass);
  font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink-soft);
}
.chip.add { background: transparent; border: 1px dashed var(--muted); color: var(--ink-2); }

/* ── atoms (level 1) — inputs ───────────────────────────────────────────
   Composed ONLY from foundation tokens. Specimen: 1-atoms/inputs.html.
   Focus = accent border + soft blue ring — the ONLY focus treatment. */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); font-family: var(--font-body); }
.input {
  height: 40px; padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--glass-strong); border: 1px solid var(--border-glass);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  box-shadow: var(--shadow-glass);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 132, 255, .18), var(--shadow-glass); }
.input:disabled { opacity: .55; cursor: default; }
textarea.input { height: auto; min-height: 96px; padding: var(--space-3) var(--space-4); resize: vertical; line-height: 1.6; }
select.input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2346546B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-4) center;
}

/* toggle — pure CSS, checkbox under the hood */
.toggle { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink-soft); }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track {
  width: 36px; height: 22px; border-radius: var(--radius-pill);
  background: rgba(10, 18, 34, .14); border: 1px solid var(--hairline);
  transition: background .2s; flex: none; position: relative;
}
.toggle .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(20, 50, 110, .35);
  transition: transform .2s;
}
.toggle input:checked + .track { background: var(--accent); border-color: transparent; }
.toggle input:checked + .track::after { transform: translateX(14px); }
.toggle input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(0, 132, 255, .18); }

/* ── molecules (level 2) — cards ────────────────────────────────────────
   Composed from materials + atoms. Specimen: 2-molecules/cards.html. */
.kicker {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong);
}
.card {
  background: var(--card); border: 1px solid var(--border-card);
  backdrop-filter: blur(var(--blur-card)); -webkit-backdrop-filter: blur(var(--blur-card));
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-6);
  font-family: var(--font-body); color: var(--ink);
}
.card.compact { padding: var(--space-4); }
.card.clickable { cursor: pointer; transition: transform .25s cubic-bezier(.2, .7, .3, 1), background .25s, box-shadow .25s; }
.card.clickable:hover { background: var(--card-hover); transform: translateY(-2px); }
.card-title { font-family: var(--font-head); font-size: var(--fs-subtitle); font-weight: 600; line-height: 1.4; color: var(--ink); }
.card-body { margin-top: var(--space-2); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.card-foot {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-small); color: var(--muted);
}
.stat-value { font-family: var(--font-head); font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); }
.stat-label { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--ink-2); }
.list { padding: 0; overflow: hidden; }
.list-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-body); color: var(--ink);
}
.list-row:first-child { border-top: 0; }
.list-row .meta { margin-left: auto; font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }

/* ── molecules (level 2) — composer ─────────────────────────────────────
   The type-or-talk bar. Specimen: 2-molecules/composer.html. */
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--ink-2);
  transition: background .2s, color .2s; flex: none;
}
.icon-btn:hover { background: var(--glass); color: var(--ink); }
.icon-btn.live { background: var(--accent-strong); color: #fff; box-shadow: var(--shadow-cta); }
.icon-btn.send { background: var(--accent-strong); color: #fff; }
.icon-btn.send.idle { background: transparent; color: var(--muted); box-shadow: none; }
.composer {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2);
  background: var(--glass-strong); border: 1px solid var(--border-glass);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  border-radius: var(--radius-pill); box-shadow: var(--shadow-glass);
  transition: border-color .2s, box-shadow .2s;
}
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 132, 255, .18), var(--shadow-glass); }
.composer input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink);
  padding: 0 var(--space-2);
}
.composer input::placeholder { color: var(--muted); }

/* ── molecules (level 2) — pane ─────────────────────────────────────────
   The slide-in side panel. Specimen: 2-molecules/panes.html. */
.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: var(--scrim);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.pane {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(380px, 92vw);
  display: flex; flex-direction: column;
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  border-left: 1px solid var(--border-glass);
  box-shadow: -24px 0 48px -24px rgba(20, 50, 110, .35);
  transform: translateX(105%); transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.pane-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--hairline); flex: none;
}
.pane-head .card-title { margin: 0; }
.pane-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-6); }

/* ── icons — grammar DECIDED via 3-icons/icons.html ─────────────────────
   24-grid · stroke 1.8 · round caps + joins · stroke-only · currentColor.
   Render 18px inline (buttons, rows), 22px nav/room items. The glyph
   library lives on the specimen page as copy-paste inline SVG. */
.icon { width: 18px; height: 18px; flex: none; }
.icon.lg { width: 22px; height: 22px; }

/* NOTE on levels 3+: the room shell, sidebar, history pane and the OrbWave
   orb are the SHIPPED RoomsConsole — quoted as law, never redesigned here.
   The app wears this file's levels 0-2; pane directions are role-bound
   (left = nav · top = history · right = detail — see 2-molecules/panes). */

/* ════ RAW MATERIAL — parents, quoted for future decisions ═══════════════
   Not law. Presence values stay here as the reference for the future
   [data-theme="dark"] mapping and the orb's state colors. */
:root {
  /* parent A: Presence (/app/, dark) */
  --p-bg: #0E0A1A;            /* deep violet-black substrate */
  --p-cream: #FAF6EC;         /* text on dark */
  --p-violet: #8B5CFF;        /* brand violet — orb "present". DECIDED 2026-06-12:
                                 the OrbWave orb KEEPS violet as its identity on the
                                 white/blue substrate (quoted from the shipped console). */
  --p-amber: #F5E041;         /* warm core accent */
  --p-orb-cold: #5A6B85;
  --p-orb-capturing: #FF6B9D;
  --p-orb-speaking: #F5B544;
  --p-orb-thinking: #4FB8D9;
  --p-light-cream: #EFE7D5;   /* the Presence light variant substrate */
}