/*
  Community app — colour tokens and shared components.

  WHY THIS FILE EXISTS

  The community app has no stylesheet. Its styling lives inline across 21
  templates: 8,414 lines of CSS and 859 hardcoded colour literals, against
  four colour tokens. The layout and type tokens in mobile-responsive.css are
  good — 15 spacing, 11 font-size, 5 shadow, 3 radius — but colour was
  started and abandoned. `.nav-link` still asks for --color-text-secondary,
  which is defined nowhere, and has been falling back to its literal for
  months.

  That is why the app could not have a light/dark toggle: a theme attribute
  has nothing to act on. 859 literals do not respond to anything.

  Worse, and only found while converting: TWENTY-ONE custom properties are
  referenced across these templates and defined nowhere, most of them with no
  fallback either. `border: 1px solid var(--border-color)` with no definition
  is not a grey border — it is an INVALID declaration, and the browser drops
  it. Roughly 200 declarations across the app are doing nothing at all right
  now: borders that never draw, radii that never round, transitions that
  never run. The compatibility block at the foot of this file is what turns
  them back on.

  (A handful, like --color-text-secondary, are defined — but locally, inside
  four templates. home.html uses it without defining it and falls back. Same
  drift, narrower blast radius.)

  RULES

  * Light values are IDENTICAL to what shipped. Converting a page to tokens
    must change nothing a visitor can see — if light mode shifts, the
    conversion is wrong, not the palette.
  * Dark values follow the palette the rest of ZygApp already uses: the
    filter rack, the colour grader and the Spotlight all sit on #07101a /
    #0b1220 with #e6eef6 ink and a #3aa0ff accent. The community app being
    light is the odd one out.
  * Dark is gated on [data-theme="dark"] ALONE. Deliberately not
    prefers-color-scheme: until every template is converted, honouring the OS
    would hand a dark ground to pages whose text is still hardcoded dark, and
    a page nobody can read is worse than a page in the wrong colour.
*/

:root {
  /* --- surfaces ------------------------------------------------------- */
  --zc-page:        #f7f7f7;   /* body ground */
  --zc-surface:     #ffffff;   /* cards, header, modals */
  --zc-surface-2:   #f3f4f6;   /* insets, hover fills */
  --zc-line:        #e5e7eb;   /* borders and rules */

  /* --- ink ------------------------------------------------------------ */
  --zc-ink:         #0f172a;   /* headings */
  --zc-ink-body:    #1e293b;   /* body copy */
  --zc-ink-soft:    #4B5563;   /* secondary, meta */
  --zc-ink-invert:  #ffffff;   /* text on a filled accent */
  /* Text sitting on a brand fill — a pink button, a blue badge. Those
     fills are the same colour in both themes, so their label is white in
     both too. Distinct from --zc-surface, which flips. */
  --zc-on-accent:   #ffffff;

  /* --- accents -------------------------------------------------------- */
  --zc-accent:      #3b82f6;   /* primary blue */
  --zc-accent-deep: #2563eb;   /* its pressed / gradient end */
  --zc-cyan:        #00d4ff;   /* market */
  --zc-violet:      #6f4cff;   /* market, secondary */
  --zc-pink:        #ec4899;   /* post button gradient start */
  --zc-orange:      #f97316;   /* post button gradient end */

  /* --- status --------------------------------------------------------- */
  --zc-ok:          #10b981;
  --zc-warn:        #b45309;
  --zc-danger:      #b91c1c;


  /* --- the grey ramp the rest of the app reaches for ------------------
     Tailwind's palette, which several templates use directly. Named by the
     job they do here rather than by their number, so a dark value can be
     something other than "the same grey, inverted". */
  --zc-surface-3:   #f9fafb;   /* gray-50  — the lightest inset */
  --zc-line-strong: #d1d5db;   /* gray-300 — inputs, dividers that must read */
  --zc-ink-strong:  #1f2937;   /* gray-800 — emphatic body text */
  --zc-ink-muted:   #6b7280;   /* gray-500 — captions, placeholders */
  --zc-danger-soft: #ef4444;   /* red-500  — destructive controls */
  --zc-danger-wash: #fee2e2;   /* red-100  — the ground under them */
  --zc-hairline:    rgba(255, 255, 255, 0.07);

  /* --- ink on a dark card ---------------------------------------------
     The market FEED card is already dark on a light page, so its text is
     light in both themes and these barely move. Kept as tokens anyway: a
     literal is a literal whether or not it happens to be theme-stable. */
  --zc-ink-on-dark:      #e2e8f0;
  --zc-ink-on-dark-soft: rgba(226, 232, 240, 0.55);
  --zc-ink-mid:          #475569;
  --zc-violet-ink:       #6d28d9;

  /* --- effects -------------------------------------------------------- */
  --zc-focus-ring:  rgba(59, 130, 246, 0.1);
  /* The fixed header. Alpha lives in the token because the header is
     translucent by design, not a surface someone turned down. */
  --zc-header:      rgba(255, 255, 255, 0.82);
  --zc-scrim:       rgba(255, 255, 255, .78);
  --zc-scrim-solid: rgba(255, 255, 255, .92);
  --zc-glow-a:      #0d1020;
  --zc-glow-b:      #080c14;
}

/*
  The toggle's other half. Nothing sets this attribute yet — see the note in
  home.html about previewing with ?theme=dark — so this block is inert until
  a page opts in, which is what makes converting one template at a time safe.
*/
:root[data-theme="dark"] {
  --zc-page:        #07101a;
  --zc-surface:     #0f1826;
  --zc-surface-2:   #16202f;
  --zc-line:        rgba(255, 255, 255, .09);

  --zc-ink:         #e6eef6;
  --zc-ink-body:    #cfdcea;
  --zc-ink-soft:    #9fb8d8;
  --zc-ink-invert:  #07101a;
  --zc-on-accent:   #ffffff;

  --zc-accent:      #3aa0ff;
  --zc-accent-deep: #2b7fd4;
  --zc-cyan:        #00d4ff;
  --zc-violet:      #8f76ff;
  --zc-pink:        #f2609f;
  --zc-orange:      #fb923c;

  --zc-ok:          #5dcaa5;
  --zc-warn:        #f0997b;
  --zc-danger:      #f2716b;


  --zc-surface-3:   #121c2b;
  --zc-line-strong: rgba(255, 255, 255, .16);
  --zc-ink-strong:  #dce8f5;
  --zc-ink-muted:   #8ca3bd;
  --zc-danger-soft: #f2716b;
  --zc-danger-wash: rgba(242, 113, 107, 0.14);
  --zc-hairline:    rgba(255, 255, 255, 0.07);

  --zc-ink-on-dark:      #e2e8f0;
  --zc-ink-on-dark-soft: rgba(226, 232, 240, 0.55);
  --zc-ink-mid:          #9fb8d8;
  --zc-violet-ink:       #b9a6ff;

  --zc-focus-ring:  rgba(58, 160, 255, 0.18);
  --zc-header:      rgba(10, 18, 30, 0.72);
  --zc-scrim:       rgba(10, 18, 30, .78);
  --zc-scrim-solid: rgba(10, 18, 30, .92);
  --zc-glow-a:      #0d1020;
  --zc-glow-b:      #080c14;
}

/* ===========================================================================
   GLOSSY PILLS

   The treatment the market cards already use: pill radius, a translucent
   wash of the accent rather than a solid fill, a 1px border of the same hue,
   and the accent as the text colour. It reads as glass over the card behind
   it, which is why it survives on both grounds — a solid gradient button has
   to be re-picked for dark, a tinted one does not.

   --zc-pill-hue is the only thing a variant changes.
   =========================================================================== */

.zc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  --zc-pill-hue: var(--zc-accent);
  padding: 9px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--zc-pill-hue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--zc-pill-hue) 30%, transparent);
  color: var(--zc-pill-hue);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  min-height: var(--touch-target-min, 44px);
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}
.zc-pill:hover {
  background: color-mix(in srgb, var(--zc-pill-hue) 20%, transparent);
  border-color: color-mix(in srgb, var(--zc-pill-hue) 55%, transparent);
  color: var(--zc-pill-hue);
}
.zc-pill:active { transform: translateY(1px); }
.zc-pill:focus-visible {
  outline: 2px solid var(--zc-pill-hue);
  outline-offset: 2px;
}

/* color-mix is well supported but not universal. Without this, an older
   engine gets a transparent background and an invisible border — the button
   would still work and still be readable, but it would not look like a
   button. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .zc-pill {
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.30);
  }
}

.zc-pill--cyan   { --zc-pill-hue: var(--zc-cyan); }
.zc-pill--violet { --zc-pill-hue: var(--zc-violet); }
.zc-pill--pink   { --zc-pill-hue: var(--zc-pink); }

/* ===========================================================================
   COMPATIBILITY: the properties the templates already ask for

   Twenty-one custom properties are referenced across the community templates
   and defined nowhere. They split into two groups, and the difference
   matters:

   WITH A FALLBACK — `var(--muted, #8b93a7)` renders fine today. Defining it
   to exactly its fallback changes nothing visible and makes it themeable.

   WITHOUT A FALLBACK — `var(--border-color)` is an INVALID value, so the
   whole declaration is dropped. Those borders, radii and transitions are not
   subtle today; they are absent. Defining them is a VISIBLE FIX: things
   appear that were never drawing. That is the author's intent restored, not
   a redesign, but it is a change worth looking at rather than assuming.

   Colour aliases point at the zc palette so they theme for free.
   =========================================================================== */

:root {
  /* --- had a fallback: same value, now themeable --------------------- */
  --muted:                #8b93a7;
  --panel-line:           #22283a;
  --ink:                  #e6eef6;

  /* --- had NO fallback: these declarations were being dropped -------- */
  --border-color:         var(--zc-line);
  --text-dark:            var(--zc-ink-strong);
  --text-muted:           var(--zc-ink-muted);
  --color-text-secondary: var(--zc-ink-muted);
  --color-text-tertiary:  var(--zc-ink-soft);
  --color-bg-secondary:   var(--zc-surface-2);
  --color-bg-light:       var(--zc-page);
  --color-bg-white:       var(--zc-surface);
  --color-primary:        var(--zc-accent);
  --color-text-primary:   var(--zc-ink);
  --bg-light:             var(--zc-page);
  /* Indigo-600. Defined in four templates and absent from three others that
     use it, so those three were dropping every declaration that referenced
     it. This is the value the four agree on. */
  --primary-color:        #4f46e5;
  --bg-subtle:            var(--zc-surface-3);
  --error-color:          var(--zc-danger-soft);
  --success-color:        var(--zc-ok);
  /* Indigo-700. Picked because #4338ca is already the literal used beside
     --primary-color (#4f46e5) in six places, so this is the value the
     templates were written against. */
  --primary-dark:         #4338ca;

  /* Geometry and motion, matching the --radius-*/--transition-* scale that
     mobile-responsive.css already defines. */
  --border-radius-sm:     6px;
  --border-radius-md:     12px;
  --border-radius-lg:     16px;
  --radius-full:          999px;
  --transition-duration:  200ms;
  --font-size-md:         1rem;
  --shadow-2xl:           0 25px 50px -12px var(--color-shadow, rgba(0, 0, 0, 0.25));
}

:root[data-theme="dark"] {
  --muted:        #8ca3bd;
  --panel-line:   rgba(255, 255, 255, .10);
  --ink:          #e6eef6;
  --primary-dark: #6f66e8;
  --primary-color: #8b85f0;
}

/* ===========================================================================
   THE THEME TOGGLE

   Two icons in one button, one of which is always hidden. Swapping
   textContent instead would leave a screen reader announcing whatever label
   happened to be there at the moment of focus; aria-pressed carries the state
   and the visible glyphs are decoration.
   =========================================================================== */

.zc-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--zc-ink-soft) 10%, transparent);
  border: 1px solid var(--zc-line);
  color: var(--zc-ink-soft);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.zc-theme-toggle:hover {
  background: color-mix(in srgb, var(--zc-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--zc-accent) 40%, transparent);
  color: var(--zc-accent);
}
.zc-theme-toggle:focus-visible {
  outline: 2px solid var(--zc-accent);
  outline-offset: 2px;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .zc-theme-toggle { background: transparent; }
}

.zc-theme-toggle svg { width: 17px; height: 17px; display: block; }
.zc-theme-toggle .zc-icon-moon { display: none; }
:root[data-theme="dark"] .zc-theme-toggle .zc-icon-sun  { display: none; }
:root[data-theme="dark"] .zc-theme-toggle .zc-icon-moon { display: block; }

/* Until the script runs there is no state to show, so showing a control that
   claims one would be a lie. It reveals itself in _theme_head.html. */
.zc-theme-toggle[hidden] { display: none; }

/* ===========================================================================
   THE PAGE GROUND

   mobile-responsive.css paints the body:

       body { background-color: var(--color-body-bg); }   /* #ffffff */

   Those four properties are the only colour tokens that file defines, and
   nothing here was overriding them — so the ground stayed white under a dark
   theme, with --color-body-text still #1a202c sitting on top of it. Dark text
   on a white page that the palette believes is dark.

   home.html happened to escape it: its own body rule reads --color-bg-light
   and, being inline, wins on source order. Every other page fell through to
   the white.

   Light values are exactly what mobile-responsive.css sets, so this changes
   nothing until data-theme is on. community.css is loaded after it, so equal
   specificity resolves here.
   =========================================================================== */

:root {
  --color-body-bg:   #ffffff;
  --color-body-text: #1a202c;
  --color-border:    #e2e8f0;
  --color-shadow:    rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] {
  --color-body-bg:   var(--zc-page);
  --color-body-text: var(--zc-ink);
  --color-border:    var(--zc-line);
  /* A shadow tuned for a white page disappears on a dark one; it has to get
     deeper to read at all. */
  --color-shadow:    rgba(0, 0, 0, 0.5);
}

/* Belt and braces for the ground itself. The body rule lives in another
   stylesheet and any page with its own inline body rule wins over it, so the
   theme states the ground it wants rather than hoping the cascade agrees. */
:root[data-theme="dark"] body {
  background-color: var(--zc-page);
  color: var(--zc-ink);
}

/* ===========================================================================
   THE WORDMARK

   Black on light, white on dark. Neither variant gets an explicit `display`
   when it is the active one: the pages that use it style their own logo
   images (some block, some inline), and forcing a value here would change the
   layout in one theme and not the other. Only the inactive one is touched.
   =========================================================================== */

:root:not([data-theme="dark"]) .zc-logo--dark  { display: none; }
:root[data-theme="dark"]       .zc-logo--light { display: none; }