/* Objatie — light and dark theme (~/fleet/guides/dark-light.md).

   `color-scheme` decides the theme; `light-dark()` picks the value. The kit
   head script (goa_theme_head) sets data-theme on <html> only for a forced
   choice; System leaves it off. Loaded AFTER css/app.css (compiled Tailwind),
   so each rule below replaces the Tailwind rule of the same class at the same
   specificity. Light values are Tailwind's own, so light mode is unchanged.
   Dark values are the ones the old `.dark` remap sheet used.

   The ROLE tokens (--fg, --bg-raised, --accent-fg ...) are not here. They are
   layer 2 of the brand, ~/lbmr-claude/skills/shared/brands/objatie/brand.css,
   vendored into public/brands/objatie/ by goa-kit-sync and linked before this
   file. Do not edit the copy: change the brand and run
       goa-kit-sync public --php-dir app/Support --brand objatie --brands-dir public/brands
   The brand also owns `:root { color-scheme: light dark }`.

   🔴 This file owns the two forcing rules. GoaSwitchesTest guards them:
   without them, forced light / dark silently stop working. */

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

/* The kit reads --font-text and --radius-sm. The brand's values are the deck's
   (Plus Jakarta Sans, 14px), and the app loads that face only in 700 and 800,
   for the wordmark. Before the brand was vendored the kit parts showed the
   kit's own fallbacks, so they stay. A change here is a design decision. */
:root {
  --font-text: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-sm: 12px;
}

/* Page ground. Was `bg-gradient-to-b from-white to-pink-50` on <body>. */
body {
  background: linear-gradient(to bottom, light-dark(#ffffff, #0f1220), light-dark(#fdf2f8, #1a1326));
  color: light-dark(#000000, #e5e7eb);
}

/* ---- Surfaces (Tailwind palette order, as in app.css) -------------------- */
.bg-white      { background-color: light-dark(rgb(255 255 255), #1e2130); }
.bg-gray-50    { background-color: light-dark(rgb(249 250 251), #2a2740); }
.bg-gray-100   { background-color: light-dark(rgb(243 244 246), #2a2740); }
.bg-gray-200   { background-color: light-dark(rgb(229 231 235), #343048); }
.bg-red-50     { background-color: light-dark(rgb(254 242 242), #3a2330); }
.bg-amber-50   { background-color: light-dark(rgb(255 251 235), #3a341f); }
.bg-amber-100  { background-color: light-dark(rgb(254 243 199), #3a341f); }
.bg-yellow-50  { background-color: light-dark(rgb(254 252 232), #2a2740); }
.bg-yellow-100 { background-color: light-dark(rgb(254 249 195), #3a341f); }
.bg-green-50   { background-color: light-dark(rgb(240 253 244), #2a2740); }
.bg-green-100  { background-color: light-dark(rgb(220 252 231), #1f3a2e); }
.bg-purple-50  { background-color: light-dark(rgb(250 245 255), #2a2740); }
/* Chat bubbles stay distinct in dark too (bot = purple, you = rose). */
.bg-purple-100 { background-color: light-dark(rgb(243 232 255), #3a2c4a); }
.bg-pink-50    { background-color: light-dark(rgb(253 242 248), #2a2740); }
.bg-pink-100   { background-color: light-dark(rgb(252 231 243), #4a2838); }

/* Translucent surfaces. A class that app.css does not compile gets
   `transparent` as its light value: that is what light shows today. */
.bg-white\/95      { background-color: light-dark(rgba(255,255,255,.95), rgba(30,33,48,.96)); }
.bg-white\/70      { background-color: light-dark(rgba(255,255,255,.7), rgba(30,33,48,.85)); }
.bg-white\/60      { background-color: light-dark(rgba(255,255,255,.6), rgba(42,39,64,.6)); }
.bg-yellow-50\/50  { background-color: light-dark(rgba(254,252,232,.5), rgba(58,52,31,.5)); }
.bg-purple-50\/40  { background-color: light-dark(transparent, rgba(42,39,64,.65)); }
.bg-purple-50\/70  { background-color: light-dark(transparent, rgba(42,39,64,.65)); }
.bg-pink-50\/40    { background-color: light-dark(transparent, rgba(42,39,64,.55)); }
.bg-pink-50\/50    { background-color: light-dark(rgba(253,242,248,.5), rgba(42,39,64,.55)); }
.bg-pink-50\/60    { background-color: light-dark(rgba(253,242,248,.6), rgba(42,39,64,.55)); }

/* ---- Light gradient surfaces → flat dark surface ------------------------- *
   light-dark() takes a colour, not `background-image: none`, so the gradient
   stops flip instead: every stop is #2a2740 in dark, which paints flat.
   Each to-/via- class below is only ever paired with one of these from-
   classes (checked 2026-10-27), so remapping it changes no other gradient. */
.from-green-50 {
  --tw-gradient-from: light-dark(#f0fdf4, #2a2740) var(--tw-gradient-from-position);
  --tw-gradient-to: light-dark(rgba(240,253,244,0), #2a2740) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-100 {
  --tw-gradient-from: light-dark(#f3e8ff, #2a2740) var(--tw-gradient-from-position);
  --tw-gradient-to: light-dark(rgba(243,232,255,0), #2a2740) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-50 {
  --tw-gradient-from: light-dark(#fdf2f8, #2a2740) var(--tw-gradient-from-position);
  --tw-gradient-to: light-dark(rgba(253,242,248,0), #2a2740) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
/* The harmony-hero band fades away in dark (it had no surface colour). */
.from-pink-50\/60 {
  --tw-gradient-from: light-dark(rgba(253,242,248,.6), transparent) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(253,242,248,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-100 {
  --tw-gradient-from: light-dark(#fce7f3, #2a2740) var(--tw-gradient-from-position);
  --tw-gradient-to: light-dark(rgba(252,231,243,0), #2a2740) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-200 {
  --tw-gradient-from: light-dark(#fbcfe8, #2a2740) var(--tw-gradient-from-position);
  --tw-gradient-to: light-dark(rgba(251,207,232,0), #2a2740) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-pink-50 {
  --tw-gradient-to: light-dark(rgba(253,242,248,0), #2a2740) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), light-dark(#fdf2f8, #2a2740) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-rose-50 {
  --tw-gradient-to: light-dark(rgba(255,241,242,0), #2a2740) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), light-dark(#fff1f2, #2a2740) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-emerald-50  { --tw-gradient-to: light-dark(#ecfdf5, #2a2740) var(--tw-gradient-to-position); }
.to-blue-100    { --tw-gradient-to: light-dark(#dbeafe, #2a2740) var(--tw-gradient-to-position); }
.to-purple-50   { --tw-gradient-to: light-dark(#faf5ff, #2a2740) var(--tw-gradient-to-position); }
.to-purple-100  { --tw-gradient-to: light-dark(#f3e8ff, #2a2740) var(--tw-gradient-to-position); }
.to-purple-200  { --tw-gradient-to: light-dark(#e9d5ff, #2a2740) var(--tw-gradient-to-position); }

/* ---- Text ---------------------------------------------------------------- */
.text-gray-300   { color: light-dark(rgb(209 213 219), #7c8499); }
.text-gray-400   { color: light-dark(rgb(156 163 175), #7c8499); }
.text-gray-500   { color: light-dark(rgb(107 114 128), #b6bccb); }
.text-gray-600   { color: light-dark(rgb(75 85 99), #b6bccb); }
.text-gray-700   { color: light-dark(rgb(55 65 81), #f3f4f6); }
.text-gray-800   { color: light-dark(rgb(31 41 55), #f3f4f6); }
.text-red-500    { color: light-dark(rgb(239 68 68), #fca5a5); }
.text-red-600    { color: light-dark(rgb(220 38 38), #fca5a5); }
/* Not compiled into app.css: light inherits, as today. */
.text-amber-500  { color: light-dark(currentcolor, #fcd34d); }
.text-amber-600  { color: light-dark(rgb(217 119 6), #fcd34d); }
.text-amber-700  { color: light-dark(rgb(180 83 9), #fcd34d); }
.text-yellow-600 { color: light-dark(rgb(202 138 4), #fcd34d); }
.text-yellow-700 { color: light-dark(rgb(161 98 7), #fcd34d); }
.text-green-600  { color: light-dark(rgb(22 163 74), #6ee7b7); }
.text-green-700  { color: light-dark(rgb(21 128 61), #6ee7b7); }
.text-purple-500 { color: light-dark(rgb(168 85 247), #c4b5fd); }
.text-purple-600 { color: light-dark(rgb(147 51 234), #c4b5fd); }
.text-purple-700 { color: light-dark(rgb(126 34 206), #c4b5fd); }
.text-pink-600   { color: light-dark(rgb(219 39 119), #f9a8d4); }
.text-pink-700   { color: light-dark(rgb(190 24 93), #f9a8d4); }

/* ---- Borders ------------------------------------------------------------- */
.border-gray-100   { border-color: light-dark(rgb(243 244 246), #3a3550); }
.border-gray-200   { border-color: light-dark(rgb(229 231 235), #3a3550); }
.border-gray-300   { border-color: light-dark(rgb(209 213 219), #3a3550); }
.border-red-200    { border-color: light-dark(rgb(254 202 202), #5b3344); }
.border-amber-100  { border-color: light-dark(rgb(254 243 199), #3a3550); }
.border-amber-200  { border-color: light-dark(rgb(253 230 138), #3a3550); }
.border-yellow-200 { border-color: light-dark(rgb(254 240 138), #3a3550); }
.border-green-100  { border-color: light-dark(rgb(220 252 231), #3a3550); }
.border-green-200  { border-color: light-dark(rgb(187 247 208), #3a3550); }
.border-purple-100 { border-color: light-dark(rgb(243 232 255), #3a3550); }
.border-purple-200 { border-color: light-dark(rgb(233 213 255), #3a3550); }
.border-purple-300 { border-color: light-dark(rgb(216 180 254), #3a3550); }
.border-pink-100   { border-color: light-dark(rgb(252 231 243), #3a3550); }
.border-pink-200   { border-color: light-dark(rgb(251 207 232), #3a3550); }
.border-pink-300   { border-color: light-dark(rgb(249 168 212), #3a3550); }

/* ---- Hover states -------------------------------------------------------- *
   The old sheet forced its values, which also froze most hover colours in dark.
   Without it a light hover would flash on a dark card, so each light hover
   gets the dark value of its static class. focus: borders stay as Tailwind
   compiles them: a visible focus is wanted in both themes. */
.hover\:bg-gray-50:hover      { background-color: light-dark(rgb(249 250 251), #2a2740); }
.hover\:bg-gray-200:hover     { background-color: light-dark(rgb(229 231 235), #343048); }
.hover\:bg-red-50:hover       { background-color: light-dark(rgb(254 242 242), #3a2330); }
.hover\:bg-purple-50:hover    { background-color: light-dark(rgb(250 245 255), #2a2740); }
.hover\:bg-purple-50\/70:hover { background-color: light-dark(rgba(250,245,255,.7), rgba(42,39,64,.65)); }
.hover\:bg-pink-50:hover      { background-color: light-dark(rgb(253 242 248), #2a2740); }
.hover\:bg-pink-50\/40:hover  { background-color: light-dark(rgba(253,242,248,.4), rgba(42,39,64,.55)); }
.hover\:bg-pink-100:hover     { background-color: light-dark(rgb(252 231 243), #4a2838); }
.hover\:text-gray-600:hover   { color: light-dark(rgb(75 85 99), #b6bccb); }
.hover\:text-red-500:hover    { color: light-dark(rgb(239 68 68), #fca5a5); }
.hover\:text-red-600:hover    { color: light-dark(rgb(220 38 38), #fca5a5); }
.hover\:text-purple-600:hover { color: light-dark(rgb(147 51 234), #c4b5fd); }
.hover\:text-pink-600:hover   { color: light-dark(rgb(219 39 119), #f9a8d4); }
.hover\:text-pink-700:hover   { color: light-dark(rgb(190 24 93), #f9a8d4); }
.group:hover .group-hover\:text-pink-600 { color: light-dark(rgb(219 39 119), #f9a8d4); }
.hover\:border-pink-200:hover { border-color: light-dark(rgb(251 207 232), #3a3550); }

/* ---- Inputs -------------------------------------------------------------- */
/* Light keeps the UA field; dark shows the surface through the field. */
input, textarea { background-color: light-dark(Field, transparent); }
input::placeholder, textarea::placeholder { color: light-dark(#9ca3af, #6b7280); }
/* Chromium paints autofill with an internal UA background that ignores
   background-color; an inset shadow is the only override. The Tailwind
   shadow/ring layers are kept after it, so focus rings still show. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px light-dark(transparent, #151824) inset,
              var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
  -webkit-text-fill-color: light-dark(currentcolor, #e5e7eb);
}

/* ---- White text on a pink fill: the brand's fill (0.22.0) ----------------
   Tailwind's pink-500 → purple-500 gave white text 3.53:1. A white-text fill
   reads the brand instead: --accent-fill (pink-600) to --second-fill (the logo
   purple). White holds 4.60:1 at the worst point of that gradient, its pink
   end. A hover is the same fill mixed 12% toward black (5.68:1).
   Only --tw-gradient-from or --tw-gradient-to is set: Tailwind's from-* also
   writes a default --tw-gradient-to, and at this specificity it would beat the
   to-* class. A disabled control keeps Tailwind's grey, and a fill without
   white text (a dot, a progress bar) keeps its colour. AccessibleFillsTest
   fails when a view adds a white-text pink fill that is not listed here. */
.text-white.from-pink-500:not(:disabled),
.text-white.from-pink-400:not(:disabled) {
  --tw-gradient-from: var(--accent-fill) var(--tw-gradient-from-position);
}
.text-white.to-purple-500:not(:disabled) {
  --tw-gradient-to: var(--second-fill) var(--tw-gradient-to-position);
}
.text-white.hover\:from-pink-600:hover:not(:disabled) {
  --tw-gradient-from: color-mix(in srgb, var(--accent-fill) 88%, black) var(--tw-gradient-from-position);
}
.text-white.hover\:to-purple-600:hover:not(:disabled) {
  --tw-gradient-to: color-mix(in srgb, var(--second-fill) 88%, black) var(--tw-gradient-to-position);
}
.text-white.bg-pink-500:not(:disabled)   { background-color: var(--accent-fill); }
.text-white.bg-purple-500:not(:disabled) { background-color: var(--second-fill); }
.text-white.hover\:bg-pink-600:hover:not(:disabled)   { background-color: color-mix(in srgb, var(--accent-fill) 88%, black); }
.text-white.hover\:bg-purple-600:hover:not(:disabled) { background-color: color-mix(in srgb, var(--second-fill) 88%, black); }

/* ---- Reduced motion (0.22.0) ----------------------------------------------
   The infinite animations stop when the system asks for less motion. Nothing
   is shown only by an animation, so stopping them hides nothing. The pulsing
   slider thumb of the layout is stopped in the layout's own style block. */
@media (prefers-reduced-motion: reduce) {
  .animate-ping,
  .animate-pulse { animation: none; }
}