/* ===========================================================================
   Meetowt — the public site, THEME LAYER (25 October 2026).

   the owner: "landing page need to be more cooler and modern and a button to
   change the language and theme changer".

   LOADED LAST ON EVERY PAGE. Light is what styles.css and site.css say, and
   nothing in this file changes it. Dark is a second set of VALUES for the same
   tokens, written twice and only twice:

     1. under prefers-color-scheme, guarded by :root:not([data-theme="light"]),
        so a visitor whose phone is dark gets dark and a visitor who pressed
        "Light" does not;
     2. under :root[data-theme="dark"], for the visitor who pressed "Dark"
        on a light phone.

   Every rule below the tokens is written ONCE and reads a token, so there is
   no third copy of anything to forget. A new component should use the tokens
   (--paper, --ink, --raised, --edge ...), never a hex.

   The choice is saved by site.js ("meetowt-theme": light, dark; absent means
   Auto) and applied before first paint by the one-line script every page
   carries in its <head>, which is why nothing flashes.

   CONTRAST, measured against --paper #17150f unless stated: --ink 15.2:1,
   --ink-soft 11.4:1, --ink-faint 6.9:1, --accent 6.6:1, --accent-ink 8.9:1,
   --jobs-pay 11.0:1. On --raised #201d16: --ink 14.3:1, --ink-faint 6.4:1.
   White on the oxide button (#c2410c to #9a3412) is 5.2:1 or better and does
   not change with the theme.
   =========================================================================== */

/* ── The new tokens, with the light values they replaced ────────────────── */
:root {
  color-scheme: light;

  --edge: rgba(22, 20, 15, 0.08);          /* a card's hairline */
  --edge-strong: rgba(22, 20, 15, 0.2);    /* a hover or dashed outline */
  --hover: rgba(22, 20, 15, 0.06);         /* a quiet hover wash */
  --bar: rgba(251, 248, 241, 0.8);         /* the floating top bar: frosted, the page shows through it */
  --sel: #fdba8c;                          /* selected text */
  --sel-ink: #16140f;
  --glass: rgba(255, 255, 255, 0.75);      /* frosted chips */
  --glass-2: rgba(255, 255, 255, 0.92);    /* frosted cards over the film */
  --mixw: #fff;                            /* what a tint is mixed toward */

  /* The drawn product window in the hero, and the little pictures in the
     feature sheet. They are illustrations of the app, and they follow the
     theme the way the app itself does. */
  --m-bar: #f6f2ea;
  --m-side: #faf7f0;
  --m-line: #e2d9c7;
  --m-soft: #efe9dd;
  --m-read: #e7e0d2;
  --m-read-h: #d9d0bf;
  --m-on: #eef5fb;
  --m-on-em: #bcd6ea;
  --m-film: #e9e1d2;
  --m-url: #8a8373;
  --m-cal: #f1ece2;
  --m-bubble: #efebe1;
  --m-open: #fbe3d6;                       /* an opened question's plus */

  --on-tone: #fff;                         /* text on a filled hue or accent chip */
  --orb-alpha: 0.5;
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12 M6 12h12'/%3E%3C/svg%3E");
}

/* ── Dark: the second set of values ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #17150f;
    --paper-deep: #221f17;
    --ink: #f1ece0;
    --ink-soft: #cfc6b3;
    --ink-faint: #a89f8c;
    --rule: #3a352a;
    --rule-soft: #2c281f;
    --accent: #e8814f;
    --accent-ink: #f0a07a;
    --raised: #201d16;
    --surface: #1c1a14;
    --lift-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
    --lift-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.45);
    --float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 26px 56px -24px rgba(0, 0, 0, 0.8);
    --jobs-pay: #6ee7b7;

    --grad: linear-gradient(100deg, #fb923c 0%, #fb7185 48%, #a78bfa 100%);

    --hue-mail: #7cc4ee;
    --hue-chat: #b9a4f7;
    --hue-meet: #fb8fa5;
    --hue-plan: #4fd1a1;
    --hue-work: #e8b45f;
    --hue-accent: #f0905f;
    --weak-mail: #14293a;
    --weak-chat: #231b3d;
    --weak-meet: #3a1822;
    --weak-plan: #12301f;
    --weak-work: #35270f;
    --weak-accent: #3a2013;

    --edge: rgba(255, 255, 255, 0.1);
    --edge-strong: rgba(255, 255, 255, 0.24);
    --hover: rgba(255, 255, 255, 0.08);
    --bar: rgba(31, 28, 21, 0.82);
    --sel: #7c2d12;
    --sel-ink: #fff;
    --glass: rgba(32, 29, 22, 0.7);
    --glass-2: rgba(32, 29, 22, 0.92);
    --mixw: #201d16;

    --m-bar: #26221a;
    --m-side: #1c1a14;
    --m-line: #3a352a;
    --m-soft: #2e2a21;
    --m-read: #3a352a;
    --m-read-h: #4a4435;
    --m-on: #162a3b;
    --m-on-em: #2f5775;
    --m-film: #2a261e;
    --m-url: #a89f8c;
    --m-cal: #2a261e;
    --m-bubble: #2e2a21;
    --m-open: #4a2615;

    --on-tone: #17150f;
    --orb-alpha: 0.28;
    --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1ece0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12 M6 12h12'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #17150f;
  --paper-deep: #221f17;
  --ink: #f1ece0;
  --ink-soft: #cfc6b3;
  --ink-faint: #a89f8c;
  --rule: #3a352a;
  --rule-soft: #2c281f;
  --accent: #e8814f;
  --accent-ink: #f0a07a;
  --raised: #201d16;
  --surface: #1c1a14;
  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
  --lift-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.45);
  --float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 26px 56px -24px rgba(0, 0, 0, 0.8);
  --jobs-pay: #6ee7b7;

  --grad: linear-gradient(100deg, #fb923c 0%, #fb7185 48%, #a78bfa 100%);

  --hue-mail: #7cc4ee;
  --hue-chat: #b9a4f7;
  --hue-meet: #fb8fa5;
  --hue-plan: #4fd1a1;
  --hue-work: #e8b45f;
  --hue-accent: #f0905f;
  --weak-mail: #14293a;
  --weak-chat: #231b3d;
  --weak-meet: #3a1822;
  --weak-plan: #12301f;
  --weak-work: #35270f;
  --weak-accent: #3a2013;

  --edge: rgba(255, 255, 255, 0.1);
  --edge-strong: rgba(255, 255, 255, 0.24);
  --hover: rgba(255, 255, 255, 0.08);
  --bar: rgba(31, 28, 21, 0.82);
  --sel: #7c2d12;
  --sel-ink: #fff;
  --glass: rgba(32, 29, 22, 0.7);
  --glass-2: rgba(32, 29, 22, 0.92);
  --mixw: #201d16;

  --m-bar: #26221a;
  --m-side: #1c1a14;
  --m-line: #3a352a;
  --m-soft: #2e2a21;
  --m-read: #3a352a;
  --m-read-h: #4a4435;
  --m-on: #162a3b;
  --m-on-em: #2f5775;
  --m-film: #2a261e;
  --m-url: #a89f8c;
  --m-cal: #2a261e;
  --m-bubble: #2e2a21;
  --m-open: #4a2615;

  --on-tone: #17150f;
  --orb-alpha: 0.28;
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1ece0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12 M6 12h12'/%3E%3C/svg%3E");
}

/* ── Rules that read the tokens (one copy, both themes) ─────────────────── */

body {
  background-color: var(--paper);
  color: var(--ink);
}
.topbar__inner {
  background: var(--bar);
  border-color: var(--edge);
}
@supports (backdrop-filter: blur(1px)) {
  .topbar__inner {
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
  }
}
.topbar nav a:hover { background: var(--hover); }

.pill-tag { background: var(--glass); border-color: var(--edge); }
.orb { opacity: var(--orb-alpha); }

.win { background: var(--raised); border-color: var(--edge); }
.win__bar { background: var(--m-bar); border-bottom-color: var(--edge); }
.win__dots i { background: var(--m-line); }
.win__url { background: var(--raised); color: var(--m-url); }
.win__side { background: var(--m-side); border-right-color: var(--edge); }
.win__list { border-right-color: var(--edge); }
.row.is-on { background: var(--m-on); }
.row.is-on em { background: var(--m-on-em); }
.win__read em { background: var(--m-read); }
.win__read em.s { background: var(--m-soft); }
.win__read em.h { background: var(--m-read-h); }
.float { background: var(--glass-2); border-color: var(--edge); }
.bubble--them { background: var(--m-soft); }
.cal i { background: var(--m-cal); }
.film { background: var(--m-film); border-color: var(--edge); }
.you em { background: var(--m-soft); }
.mini__bubble:not(.mini__bubble--me),
.mini__typing { background: var(--m-bubble); }
.faq2 .qa[open] .qa__q::after { background-color: var(--m-open); }
.faq2 .qa__q::after {
  background:
    var(--plus) center / 55% no-repeat,
    var(--paper);
}
.xchips { background: var(--glass); }

/* TEXT ON A FILLED CHIP. In dark the hues and the accent are the LIGHT ones (they
   have to read as text on a dark page), so the white that sat on them in light
   mode would measure 1.9:1; a chip's text turns to ink instead. Light is unchanged. */
.new,
.feat__icon,
.feat__more:focus-visible,
.xchip--new b,
.is-explorer .feat:focus-visible::after,
.xsheet__body .feat__more,
.xsheet__step:hover,
.mini__pill--solid,
.mini__face,
.mini__bubble--me,
.mini__swap b,
.fp-steps li::before,
.cmp thead th.cmp__ours {
  color: var(--on-tone);
}

/* The dark band and the heavy blocks stay dark in BOTH themes: --ink turns
   light in dark mode, and a band painted with it would turn into a pale slab. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section--inverse {
    background: var(--night);
    color: var(--on-night);
    border-top-color: var(--night);
  }
  :root:not([data-theme="light"]) .site-foot {
    border-top: 1px solid var(--rule);
  }
}
:root[data-theme="dark"] .section--inverse {
  background: var(--night);
  color: var(--on-night);
  border-top-color: var(--night);
}
:root[data-theme="dark"] .site-foot {
  border-top: 1px solid var(--rule);
}

/* Selecting text: the peach it always was, and a deep oxide with white text in dark
   (the light peach under light text would be unreadable). */
::selection {
  background: var(--sel);
  color: var(--sel-ink);
}

/* CUSTOMER LOGOS KEEP A LIGHT PLATE IN DARK (Mina, 25 Oct 2026: "fix how the
   companies are shown"). A company's logo is drawn for white paper, and
   customers.js keys its white box out — so on a dark plate a dark or navy mark
   simply vanished (Fix's blue, a black wordmark beside it). The plate stays the
   light paper it was made for; the invite plate stays dashed and dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .customers .customer:not(.customer--invite) {
    --plate: #f6f2ea;
    background: var(--plate);
    border-color: transparent;
  }
  :root:not([data-theme="light"]) .customers .customer:not(.customer--invite) .customer__face {
    color: #16140f;
  }
}
:root[data-theme="dark"] .customers .customer:not(.customer--invite) {
  --plate: #f6f2ea;
  background: var(--plate);
  border-color: transparent;
}
:root[data-theme="dark"] .customers .customer:not(.customer--invite) .customer__face {
  color: #16140f;
}