/* ============================================================
   Nearily panel — THE colour tokens (light + dark)

   Every panel document links this file BEFORE its own <style>, so a
   screen that still wants a colour of its own can simply declare it
   afterwards. Nothing here is a component style: this file only names
   colours, and the rest of the panel spends them.

   Why channel triplets (`--ink-rgb: 26, 26, 46`) and not finished
   colours: the panel's whole visual language is one ink and one glass
   at fifty different alphas — `rgba(26,26,46,.55)` for muted text,
   `.06` for a hairline, `.08` for a chip. Naming the CHANNELS lets
   every one of those call sites keep its own alpha and still flip with
   the theme, which is the difference between a token migration and
   maintaining two copies of the stylesheet.

   Three ideas are worth knowing before editing:

     · --ink-rgb INVERTS between themes (dark ink on light, light ink
       on dark). --ink-solid-rgb does NOT: it is the chrome that is
       dark on purpose in both themes — toasts, code blocks, the sheet
       scrim, the impersonation banner — because white text sits on it.

     · --glass-rgb / --glass-line-rgb / --glass-bevel-rgb are all
       rgba(255,255,255,…) in light mode. They part company in dark:
       the fill goes to a grey that lands the cards on #24242A, while
       the border and the inset top highlight have to stay LIGHTER than
       that fill or the card loses its edge.

     · --brand is the solid fill (white text sits on it, so it stays a
       real blue). --brand-text / --brand-ink are the brand used as
       TEXT on a neutral surface, and those have to lighten in dark
       mode or #0066D6 on #24242A drops to 1.7:1.

   Fills that already read on either theme — status dots, the green /
   amber / red chip tints, avatar gradients — are deliberately left as
   literals at their call sites. Only their TEXT colours are tokens.

   Which theme is live is decided before first paint by the inline
   snippet in every document's <head> and maintained by /panel-theme.js;
   both write data-theme="light" | "dark" on <html>. The media query at
   the foot of this file is the no-JS fallback only.
   ============================================================ */

:root {
  color-scheme: light;

  /* ── ink: text, hairlines, subtle fills ─────────────────────── */
  --ink-rgb: 26, 26, 46;
  --ink: #1A1A2E;
  /* Dark in BOTH themes — white text sits on it. */
  --ink-solid-rgb: 26, 26, 46;
  --ink-solid: #1A1A2E;
  /* A filled pill that reads as "inverse of the page". */
  --ink-fill: #1A1A2E;
  --ink-fill-hover: #2E2E4E;
  --on-ink-fill: #FFFFFF;

  /* ── glass ──────────────────────────────────────────────────── */
  --glass-rgb: 255, 255, 255;        /* card / input / pill fills */
  --glass-line-rgb: 255, 255, 255;   /* hairline borders and rings  */
  --glass-bevel-rgb: 255, 255, 255;  /* inset top highlight        */
  --surface: #FFFFFF;                /* opaque popovers, mobile drawer */
  --surface-2: #EAECF2;              /* opaque neutral bubble       */

  /* ── elevation ──────────────────────────────────────────────── */
  --shadow-rgb: 31, 38, 135;

  /* ── brand ──────────────────────────────────────────────────── */
  --brand: #007AFD;          /* solid fill                        */
  --brand-hover: #0066D6;    /* solid fill, hover                 */
  --brand-rgb: 0, 122, 253;  /* tints, rings, glows               */
  --brand-text: #007AFD;     /* brand as text/icon on a neutral   */
  --brand-ink: #0066D6;      /* brand text on a brand-tinted chip */
  --brand-ink-2: #0059B8;
  --brand-ink-3: #0F3E85;
  --brand-ink-4: #1E4E8C;
  --brand-deep: #0052AD;
  --brand-soft: #1E40AF;

  /* ── semantic TEXT (the tints they sit on stay literal) ─────── */
  --ok-ink: #047857;
  --ok-ink-2: #059669;
  --ok-ink-3: #0B815A;
  --ok-ink-4: #166534;
  --warn-ink: #92400E;
  --warn-ink-2: #B45309;
  --warn-ink-3: #92600A;
  --alert-ink: #9A3412;
  --alert-ink-2: #C2410C;
  --danger-ink: #991B1B;
  --danger-ink-2: #B91C1C;
  --danger-ink-3: #DC2626;
  --violet-ink: #6D28D9;
  --violet-ink-2: #7C3AED;
  --teal-ink: #0F766E;
  --teal-ink-2: #0E9C8F;
  --slate-ink: #475569;
  --slate-ink-2: #374151;

  /* ── skeleton shimmer ───────────────────────────────────────── */
  --skel-rgb: 20, 30, 50;          /* pooled-view skeletons   */
  --shimmer-rgb: 228, 228, 231;    /* avatar placeholder sweep */
  --shimmer-hi-rgb: 244, 244, 245;
}

/* ============================================================
   DARK — grey, never black.

   The anchors: page floor #141418, card #24242A-ish (the glass fill
   lands there over the backdrop), text #E8E8F0. Brand #0A84FF keeps
   white button text at the same ratio it has in light mode; brand TEXT
   moves to #6FB4FF, which is 7:1 on a card.

   The atmosphere is re-decided rather than dimmed. The warm gradient
   becomes a dark dome (a single radial from #24242C down to #141418),
   and the blurred sunset photo is replaced by two very soft colour
   fields — a blue one high on the left, a violet one low on the
   right. They travel through the SAME body::before that carried the
   photo, so the 80px blur and the scale(1.2) still apply and the
   result is a slow, dark aurora rather than a picture. The mist veil
   (body::after) turns into a faint smoke over that.
   ============================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;

  --ink-rgb: 232, 232, 240;
  --ink: #E8E8F0;
  --ink-solid-rgb: 8, 8, 11;
  --ink-solid: #08080B;
  --ink-fill: #E8E8F0;
  --ink-fill-hover: #FFFFFF;
  --on-ink-fill: #17171B;

  --glass-rgb: 42, 42, 50;
  --glass-line-rgb: 92, 92, 110;
  --glass-bevel-rgb: 84, 84, 100;
  --surface: #33333C;
  --surface-2: #34343E;

  --shadow-rgb: 0, 0, 0;

  --brand: #0A84FF;
  --brand-hover: #3D9BFF;
  --brand-rgb: 10, 132, 255;
  --brand-text: #6FB4FF;
  --brand-ink: #6FB4FF;
  --brand-ink-2: #7FBBFF;
  --brand-ink-3: #9CC8FF;
  --brand-ink-4: #9CC8FF;
  --brand-deep: #A8CFFF;
  --brand-soft: #8FC0FF;

  --ok-ink: #34D399;
  --ok-ink-2: #34D399;
  --ok-ink-3: #34D399;
  --ok-ink-4: #4ADE80;
  --warn-ink: #FBBF24;
  --warn-ink-2: #FCD34D;
  --warn-ink-3: #FBBF24;
  --alert-ink: #FDBA74;
  --alert-ink-2: #FDBA74;
  --danger-ink: #FCA5A5;
  --danger-ink-2: #F87171;
  --danger-ink-3: #F87171;
  --violet-ink: #C4B5FD;
  --violet-ink-2: #C4B5FD;
  --teal-ink: #5EEAD4;
  --teal-ink-2: #5EEAD4;
  --slate-ink: #94A3B8;
  --slate-ink-2: #9CA3AF;

  --skel-rgb: 190, 195, 214;
  --shimmer-rgb: 56, 56, 66;
  --shimmer-hi-rgb: 76, 76, 88;

  /* Atmosphere. `:root[…]` (0,2,0) on purpose: it has to outrank the
     plain `:root { --theme-gradient: … }` each screen declares in its
     own <style>, which is written after this file. */
  --theme-base: #17171B;
  --theme-gradient: radial-gradient(130% 95% at 50% 0%, #24242C 0%, #1B1B20 52%, #141418 100%);
  --theme-photo:
    radial-gradient(52% 44% at 16% 4%, rgba(10, 132, 255, .26) 0%, rgba(10, 132, 255, 0) 72%),
    radial-gradient(48% 42% at 88% 96%, rgba(124, 58, 237, .20) 0%, rgba(124, 58, 237, 0) 74%);
  --theme-photo-opacity: .9;
}

/* A floor under the atmosphere, for a document that paints none of its own.
   `:not(.embed)` on purpose: a hosted view runs inside the shell's glass card
   and /panel-embed.js clears its background for exactly that reason — an
   opaque floor here would paint over the card it sits in. */
:root[data-theme="dark"]:not(.embed) body { background-color: var(--theme-base); }

/* ── No-JS fallback ──────────────────────────────────────────────
   /panel-theme.js and the inline snippet in each <head> always write
   data-theme, so this block only runs when scripting is off. Kept in
   sync with the rule above by hand. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --ink-rgb: 232, 232, 240;
    --ink: #E8E8F0;
    --ink-solid-rgb: 8, 8, 11;
    --ink-solid: #08080B;
    --ink-fill: #E8E8F0;
    --ink-fill-hover: #FFFFFF;
    --on-ink-fill: #17171B;

    --glass-rgb: 42, 42, 50;
    --glass-line-rgb: 92, 92, 110;
    --glass-bevel-rgb: 84, 84, 100;
    --surface: #33333C;
    --surface-2: #34343E;

    --shadow-rgb: 0, 0, 0;

    --brand: #0A84FF;
    --brand-hover: #3D9BFF;
    --brand-rgb: 10, 132, 255;
    --brand-text: #6FB4FF;
    --brand-ink: #6FB4FF;
    --brand-ink-2: #7FBBFF;
    --brand-ink-3: #9CC8FF;
    --brand-ink-4: #9CC8FF;
    --brand-deep: #A8CFFF;
    --brand-soft: #8FC0FF;

    --ok-ink: #34D399;
    --ok-ink-2: #34D399;
    --ok-ink-3: #34D399;
    --ok-ink-4: #4ADE80;
    --warn-ink: #FBBF24;
    --warn-ink-2: #FCD34D;
    --warn-ink-3: #FBBF24;
    --alert-ink: #FDBA74;
    --alert-ink-2: #FDBA74;
    --danger-ink: #FCA5A5;
    --danger-ink-2: #F87171;
    --danger-ink-3: #F87171;
    --violet-ink: #C4B5FD;
    --violet-ink-2: #C4B5FD;
    --teal-ink: #5EEAD4;
    --teal-ink-2: #5EEAD4;
    --slate-ink: #94A3B8;
    --slate-ink-2: #9CA3AF;

    --skel-rgb: 190, 195, 214;
    --shimmer-rgb: 56, 56, 66;
    --shimmer-hi-rgb: 76, 76, 88;

    --theme-base: #17171B;
    --theme-gradient: radial-gradient(130% 95% at 50% 0%, #24242C 0%, #1B1B20 52%, #141418 100%);
    --theme-photo:
      radial-gradient(52% 44% at 16% 4%, rgba(10, 132, 255, .26) 0%, rgba(10, 132, 255, 0) 72%),
      radial-gradient(48% 42% at 88% 96%, rgba(124, 58, 237, .20) 0%, rgba(124, 58, 237, 0) 74%);
    --theme-photo-opacity: .9;
  }
  :root:not([data-theme]):not(.embed) body { background-color: var(--theme-base); }
}