/* ═══════════════════════════════════════════════════════════════════════════
   Atrium design tokens.

   Deliberately inherited from the cowork24 landing page so the product reads as
   the same company: the same Fraunces/IBM Plex pairing, the same teal, the same
   warm paper. What changes is DENSITY - a marketing page breathes, a workspace
   someone sits in for eight hours does not.

   One adaptation that matters: the chrome (rail, top bar) carries the warm
   paper, while the pane area stays neutral. The panes hold Nextcloud, which is
   white and cool; wrapping that in cream everywhere would make the seam obvious.
   Warm frame, neutral stage.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-var.woff2')format('woff2-variations');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-var.woff2')format('woff2-variations');font-weight:100 700;font-display:swap;font-style:normal}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-400.woff2')format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-500.woff2')format('woff2');font-weight:500;font-display:swap;font-style:normal}

:root{
  /* chrome - the warm paper the brand is built on */
  --ground:#f4f2ec; --ground-deep:#e9e6dd; --surface:#fffefb;
  --line:#ddd8cc; --line-soft:#e8e4da;
  /* the stage the panes sit on: cool and quiet, so an embedded app does not
     look pasted onto a different product */
  --stage:#f7f8f8; --stage-line:#e4e7e7;
  /* A web page shown in Files or chat is written for white paper, in either theme. */
  --page-paper:#fff;
  --ink:#12212b; --muted:#5f7079; --faint:#8a9aa2;
  /* THE CALL IS DARK IN EVERY THEME, and so it has its own small palette,
     defined once here and never overridden below. Two reasons, one of them
     learned twice:
       · Video is the subject. Every product people have been in a call with
         goes dark around the picture, because a bright room competes with it.
       · Names, timers and controls over video are light. Painted onto a light
         theme they vanish — reported on 2026-09-11 for the framed call ("can
         not see anything in call dialog") and again on 2026-09-12 for
         Atrium's own, which is why these are tokens now and not one
         stylesheet's assumption.
     The values are Atrium's own DARK palette, so a call looks like the same
     product in either theme rather than like a borrowed component. */
  --call-ground:#060d12; --call-stage:#0c151b; --call-surface:#0f1c25;
  --call-ink:#e8f0f3; --call-muted:#93a8b1; --call-line:#1d2f3a;
  /* Call background scenes (call/effects.js paints them: wash from 1 to 2,
     out-of-focus lights in 3). Dark in both themes, like the call itself. */
  --call-scene-dawn-1:#3b2a4a; --call-scene-dawn-2:#c77d5a; --call-scene-dawn-3:#f3c98b;
  --call-scene-slate-1:#1c2a33; --call-scene-slate-2:#4b6270; --call-scene-slate-3:#a9c4cf;
  --call-scene-fern-1:#16322a; --call-scene-fern-2:#4f7a52; --call-scene-fern-3:#cfe3a8;
  --brand:#0d6c66; --brand-deep:#095049; --brand-tint:#dcece9; --brand-glow:rgba(13,108,102,.16);
  --warm:#b3651a; --warm-tint:#f7e7d4;
  --danger:#9c3328;
  /* Presence (owner 2026-10-14: Away and Do not disturb were nearly the same colour). Three hues that can't be mistaken
     for each other, and each also has its own symbol (talk.css .talk-dot, app.css .status-dot): not colour alone. */
  --st-ok:#1a8a52; --st-away:#e8a100; --st-dnd:#d92d20;
  /* Conversation themes (talk/themes.js): one hue each, mixed with the light or
     dark surface in talk.css, so the same hue serves both. Dark enough to carry
     white text on a button and to read as a link on a surface. */
  --theme-ocean:#22709c; --theme-turquoise:#0b7f86; --theme-forest:#2f7a43;
  --theme-rose:#b33d6e; --theme-sunset:#c25a1d; --theme-sand:#8f6a2c;
  --theme-lavender:#6b4fb3; --theme-night:#33438a;
  --shadow-sm:0 1px 2px rgba(18,33,43,.06),0 2px 6px rgba(18,33,43,.05);
  --shadow-md:0 2px 6px rgba(18,33,43,.06),0 12px 28px rgba(18,33,43,.09);
  --shadow-lg:0 6px 16px rgba(18,33,43,.08),0 28px 64px rgba(18,33,43,.13);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.7,.3,1);
  --rail:72px; --topbar:56px;
  /* The space the device's own bars occupy, and ONE definition of it.
     In a browser the page owns it and reads it from the viewport. Inside
     Atrium's Android app the APP owns it — it pads its own window out of the
     system bars — and the page must add nothing, or the two paddings stack
     and leave a visible strip of nothing above the navigation bar (reported
     2026-09-20 on 0.1.3, the same "two definitions of one intent" again). */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  /* Label colours (mail/labels.js). Eight, because a person can tell eight
     apart and cannot tell twenty; each is a NAME in the stored data and a
     value only here. Paired: --lb-* is the mark, --lb-*-tint its ground. */
  --lb-slate:#5f7079;  --lb-slate-tint:#e7eaec;
  --lb-teal:#0d6c66;   --lb-teal-tint:#dcece9;
  --lb-blue:#245b8f;   --lb-blue-tint:#dde8f3;
  --lb-violet:#5b4a9c; --lb-violet-tint:#e6e2f4;
  --lb-plum:#8d3f6d;   --lb-plum-tint:#f3dfec;
  --lb-red:#9c3328;    --lb-red-tint:#f6ded9;
  --lb-amber:#8a5a12;  --lb-amber-tint:#f7e7d4;
  --lb-green:#3f6b2a;  --lb-green-tint:#e3efd9;
}
/* System theme stamps NOTHING on the root, so the un-stamped document is what
   most people see - which is why this is a media query and not only a selector.
   Guarded so an explicit light choice still beats a dark OS. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0a1219; --ground-deep:#060d12; --surface:#0f1c25;
    --line:#233945; --line-soft:#1a2c36;
    --stage:#0c151b; --stage-line:#1d2f3a;
    --ink:#e8f0f3; --muted:#93a8b1; --faint:#6d838d;
    --brand:#3fa79f; --brand-deep:#2b8078; --brand-tint:#0f2e2c; --brand-glow:rgba(63,167,159,.20);
    --warm:#d98c3f; --warm-tint:#2e2115; --danger:#d9776c;
    --st-ok:#3dbb7a; --st-away:#f2b829; --st-dnd:#f0685b;
    --shadow-sm:0 1px 2px rgba(0,0,0,.32); --shadow-md:0 8px 26px rgba(0,0,0,.40);
    --shadow-lg:0 22px 60px rgba(0,0,0,.52);
    /* The same eight, lifted for a dark ground: the mark brightens, the
       tint becomes a deep wash rather than a pale one. */
    --lb-slate:#93a8b1;  --lb-slate-tint:#1d2a31;
    --lb-teal:#3fa79f;   --lb-teal-tint:#0f2e2c;
    --lb-blue:#6fa8dc;   --lb-blue-tint:#132534;
    --lb-violet:#a294e0; --lb-violet-tint:#1f1b33;
    --lb-plum:#d98cba;   --lb-plum-tint:#301a28;
    --lb-red:#d9776c;    --lb-red-tint:#33191a;
    --lb-amber:#d98c3f;  --lb-amber-tint:#2e2115;
    --lb-green:#8fc070;  --lb-green-tint:#1b2a18;
  }
}
:root[data-theme="dark"]{
  --ground:#0a1219; --ground-deep:#060d12; --surface:#0f1c25;
  --line:#233945; --line-soft:#1a2c36;
  --stage:#0c151b; --stage-line:#1d2f3a;
  --ink:#e8f0f3; --muted:#93a8b1; --faint:#6d838d;
  --brand:#3fa79f; --brand-deep:#2b8078; --brand-tint:#0f2e2c; --brand-glow:rgba(63,167,159,.20);
  --warm:#d98c3f; --warm-tint:#2e2115; --danger:#d9776c;
  --st-ok:#3dbb7a; --st-away:#f2b829; --st-dnd:#f0685b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.32); --shadow-md:0 8px 26px rgba(0,0,0,.40);
  --shadow-lg:0 22px 60px rgba(0,0,0,.52);
  --lb-slate:#93a8b1;  --lb-slate-tint:#1d2a31;
  --lb-teal:#3fa79f;   --lb-teal-tint:#0f2e2c;
  --lb-blue:#6fa8dc;   --lb-blue-tint:#132534;
  --lb-violet:#a294e0; --lb-violet-tint:#1f1b33;
  --lb-plum:#d98cba;   --lb-plum-tint:#301a28;
  --lb-red:#d9776c;    --lb-red-tint:#33191a;
  --lb-amber:#d98c3f;  --lb-amber-tint:#2e2115;
  --lb-green:#8fc070;  --lb-green-tint:#1b2a18;
}

/* Hosted by the app: it has already padded its window, so every inset the
   page would add is zero. */
:root[data-host="app"]{ --safe-t:0px; --safe-b:0px; }