/* ----------------------------------------------------------------------------
 * Kairo / Kunst brand overlay
 * Drops into the Plane web container at /assets/kairo-kunst-brand.css
 * and is loaded from index.html AFTER all Plane stylesheets.
 *
 * Strategy: re-map Plane's CSS custom properties to the Kunst palette
 * (taken from kunst-site-node/app/globals.css), then add a thin layer of
 * !important rules for the few surfaces that bake colors in by class.
 *
 * Token names are based on Plane v2.5.x. If your build uses different
 * variable names, inspect the element in DevTools and add the matching
 * property to the :root blocks below.
 * -------------------------------------------------------------------------- */

/* ---- Webfonts ----------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");

/* ---- Kunst palette as raw vars ----------------------------------------- */
:root {
  /* Brand */
  --kunst-red:        #ec193c;
  --kunst-red-strong: #cf1232;
  --kunst-red-soft:   oklch(0.93 0.06 20);

  /* Warm editorial neutrals */
  --kunst-paper:      oklch(0.985 0.006 78);
  --kunst-bg:         oklch(0.975 0.008 78);
  --kunst-card:       oklch(0.990 0.004 78);
  --kunst-ink:        oklch(0.180 0.020 50);
  --kunst-ink-muted:  oklch(0.420 0.015 50);
  --kunst-ink-soft:   oklch(0.550 0.012 50);
  --kunst-border:     oklch(0.880 0.012 60);
  --kunst-border-str: oklch(0.780 0.015 60);

  /* Dark surface (used in command palette, modals on dark, etc.) */
  --kunst-dark:       oklch(0.190 0.018 50);
  --kunst-dark-fg:    oklch(0.940 0.012 70);

  /* Type */
  --kunst-font-head:  "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kunst-font-body:  "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kunst-font-serif: "Instrument Serif", Georgia, serif;
}

/* ---- Re-map Plane tokens — LIGHT ---------------------------------------- */
html,
html[data-theme="light"],
html[data-theme="light-contrast"] {
  /* Surfaces */
  --color-background: var(--kunst-bg);
  --color-background-100: var(--kunst-bg);
  --color-background-90:  var(--kunst-paper);
  --color-background-80:  var(--kunst-card);
  --color-background-70:  oklch(0.96 0.012 78);
  --color-background-60:  oklch(0.94 0.015 78);

  --color-canvas: var(--kunst-bg);
  --color-sidebar-background-100: var(--kunst-paper);
  --color-sidebar-background-90:  var(--kunst-card);
  --color-sidebar-text-100: var(--kunst-ink);
  --color-sidebar-text-200: var(--kunst-ink-muted);
  --color-sidebar-text-300: var(--kunst-ink-soft);

  /* Text */
  --color-text-100: var(--kunst-ink);
  --color-text-200: var(--kunst-ink-muted);
  --color-text-300: var(--kunst-ink-soft);
  --color-text-400: oklch(0.70 0.010 60);

  /* Borders */
  --color-border-100: var(--kunst-border);
  --color-border-200: var(--kunst-border);
  --color-border-300: var(--kunst-border-str);
  --color-border-400: var(--kunst-border-str);

  /* Primary — Kunst red */
  --color-primary-10:  oklch(0.97 0.025 18);
  --color-primary-30:  oklch(0.90 0.080 22);
  --color-primary-50:  oklch(0.80 0.130 24);
  --color-primary-100: #fde8ed;
  --color-primary-200: #f9c4ce;
  --color-primary-300: #f4909f;
  --color-primary-400: #f0566f;
  --color-primary-500: #ec193c;       /* core */
  --color-primary-600: #cf1232;
  --color-primary-700: #a80e28;
  --color-primary-800: #800b20;
  --color-primary-900: #5a0717;

  --color-accent: var(--kunst-red);

  /* Tweak the runtime theme color exposed in the manifest */
  color-scheme: light;
}

/* ---- Re-map Plane tokens — DARK ---------------------------------------- */
html[data-theme="dark"],
html[data-theme="dark-contrast"] {
  --color-background: var(--kunst-dark);
  --color-background-100: var(--kunst-dark);
  --color-background-90:  oklch(0.22 0.018 50);
  --color-background-80:  oklch(0.25 0.018 50);
  --color-background-70:  oklch(0.28 0.018 50);
  --color-background-60:  oklch(0.32 0.018 50);

  --color-canvas: var(--kunst-dark);
  --color-sidebar-background-100: oklch(0.16 0.018 50);
  --color-sidebar-background-90:  oklch(0.20 0.018 50);
  --color-sidebar-text-100: var(--kunst-dark-fg);
  --color-sidebar-text-200: oklch(0.78 0.012 60);
  --color-sidebar-text-300: oklch(0.62 0.012 60);

  --color-text-100: var(--kunst-dark-fg);
  --color-text-200: oklch(0.78 0.012 60);
  --color-text-300: oklch(0.62 0.012 60);
  --color-text-400: oklch(0.50 0.012 60);

  --color-border-100: oklch(1 0 0 / 0.08);
  --color-border-200: oklch(1 0 0 / 0.12);
  --color-border-300: oklch(1 0 0 / 0.18);
  --color-border-400: oklch(1 0 0 / 0.24);

  --color-primary-100: #2a0a13;
  --color-primary-200: #4a0c1c;
  --color-primary-300: #7a0f27;
  --color-primary-400: #b81234;
  --color-primary-500: #ec193c;
  --color-primary-600: #f44a66;
  --color-primary-700: #f87990;
  --color-primary-800: #fcadbb;
  --color-primary-900: #fdd9e1;

  --color-accent: var(--kunst-red);

  color-scheme: dark;
}

/* ---- Typography --------------------------------------------------------- */
html, body, .text-base, .text-sm, .text-xs, .text-lg, .text-xl, button, input, textarea, select {
  font-family: var(--kunst-font-body), system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.heading, .heading-1, .heading-2, .heading-3 {
  font-family: var(--kunst-font-head) !important;
  letter-spacing: -0.025em;
}

/* ---- Accent reinforcements (in case Plane bakes colors in) ------------- */

/* Primary buttons — covers Tailwind utility patterns Plane commonly uses */
.bg-primary,
.bg-custom-primary,
.bg-custom-primary-100,
.bg-custom-primary-200,
button[class*="bg-custom-primary"],
a[class*="bg-custom-primary"] {
  background-color: var(--kunst-red) !important;
  color: #fff !important;
}

.bg-primary:hover,
.bg-custom-primary:hover,
.bg-custom-primary-100:hover,
button[class*="bg-custom-primary"]:hover {
  background-color: var(--kunst-red-strong) !important;
}

.text-primary,
.text-custom-primary,
.text-custom-primary-100,
.text-custom-primary-200,
[class*="text-custom-primary"] {
  color: var(--kunst-red) !important;
}

.border-primary,
.border-custom-primary,
[class*="border-custom-primary"] {
  border-color: var(--kunst-red) !important;
}

/* Focus rings */
*:focus-visible {
  outline-color: var(--kunst-red) !important;
}

/* Selection highlight */
::selection {
  background: color-mix(in oklch, var(--kunst-red) 28%, transparent);
  color: inherit;
}

/* Avatars / chips / sign-in buttons that defaulted to blue in Plane */
.bg-blue-50, .bg-blue-100, .bg-blue-200 { background-color: var(--kunst-red-soft) !important; }
.bg-blue-300, .bg-blue-400 { background-color: color-mix(in oklch, var(--kunst-red) 60%, white) !important; }
.bg-blue-500, .bg-blue-600 { background-color: var(--kunst-red) !important; color: #fff !important; }
.bg-blue-700, .bg-blue-800, .bg-blue-900 { background-color: var(--kunst-red-strong) !important; color: #fff !important; }
.hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover {
  background-color: var(--kunst-red-strong) !important;
}
.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800,
[class*="text-blue-"] { color: var(--kunst-red) !important; }
.border-blue-500, .border-blue-600, .border-blue-700,
[class*="border-blue-"] { border-color: var(--kunst-red) !important; }
.ring-blue-500, .ring-blue-600,
[class*="ring-blue-"] { --tw-ring-color: var(--kunst-red) !important; }

/* Sign-in screen "Continue with Email/Magic" primary button often uses these */
button[class*="bg-blue"],
button[class*="bg-indigo"] {
  background-color: var(--kunst-red) !important;
  color: #fff !important;
}
button[class*="bg-blue"]:hover,
button[class*="bg-indigo"]:hover {
  background-color: var(--kunst-red-strong) !important;
}

/* Gradient backgrounds on sign-in/onboarding screens */
[class*="bg-gradient"][class*="from-blue"],
[class*="bg-gradient"][class*="to-blue"] {
  background-image: linear-gradient(135deg, var(--kunst-red), var(--kunst-red-strong)) !important;
}

/* ---- Inline SVG wordmark overlay ----------------------------------------
 * Plane renders its top-left wordmark as an inline <svg viewBox="0 0 253 53">
 * inside an <a href="/"> on the sign-in screen, admin header, etc. We can't
 * mutate this SVG from JS without breaking React 18 hydration (#418/#425),
 * so we hide it via CSS and paint the Kunst lockup on the parent <a> using
 * the :has() selector + ::after pseudo-element.
 * -------------------------------------------------------------------------- */
a[href="/"]:has(> svg[viewBox="0 0 253 53"]),
a[href="/sign-in"]:has(> svg[viewBox="0 0 253 53"]) {
  position: relative;
  display: inline-flex;
  align-items: center;
}
a[href="/"] > svg[viewBox="0 0 253 53"],
a[href="/sign-in"] > svg[viewBox="0 0 253 53"] {
  visibility: hidden;
}
a[href="/"]:has(> svg[viewBox="0 0 253 53"])::after,
a[href="/sign-in"]:has(> svg[viewBox="0 0 253 53"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/logo-kunst-black.svg") left center / contain no-repeat;
  pointer-events: none;
}
html[data-theme*="dark"] a[href="/"]:has(> svg[viewBox="0 0 253 53"])::after,
html[data-theme*="dark"] a[href="/sign-in"]:has(> svg[viewBox="0 0 253 53"])::after {
  background-image: url("/assets/logo-kunst-white.svg");
}

/* Spinner GIF replaced by JS — hide raw <img> with the old Plane src
   as an extra safety net while the JS runs. Provider logos stay visible. */
img[src*="logo-spinner-light"]:not([data-kairo-logo-swapped]),
img[src*="logo-spinner-dark"]:not([data-kairo-logo-swapped]),
img[src*="gradient-bg-logo"]:not([data-kairo-logo-swapped]),
img[src*="gradient-logo"]:not([data-kairo-logo-swapped]) {
  visibility: hidden;
}
img[data-kairo-logo-swapped="1"] {
  visibility: visible !important;
}

/* Loader: the SMIL animation was stripped by the design tool's sanitizer, so
   the SVG is static. Rotate the <img> itself to recreate the spinning effect.
   Background of the SVG matches the page surface so the rotation is invisible
   except for the brand-coloured arc/square inside. */
img.kairo-loader-svg,
img[src*="loader-spinner"] {
  animation: kairo-kunst-spin 1.4s linear infinite;
  will-change: transform;
}
@keyframes kairo-kunst-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}