/* ============================================================================
   gokensai-brand.css  —  SINGLE SHARED GoKensai GOLD token/style source
   ----------------------------------------------------------------------------
   The one common brand source for ALL migrated pages (loaded AFTER
   mig-tailwind.css so it overrides the cyan Tailwind utilities to gold).
   Re-skin direction: kensai.app CYAN accent -> gokensai GOLD/black.
   Semantic status colors (green/red/yellow/orange) are intentionally LEFT
   UNCHANGED — they are state indicators, not the brand accent.
   ============================================================================ */

:root {
  /* Canonical GoKensai gold palette (identical to the bespoke guide vars) */
  --gk-gold:        #c9a15a;              /* primary accent  rgb(201,161,90) */
  --gk-gold-rgb:    201, 161, 90;
  --gk-gold-dim:    #8a6d34;              /* bronze / dim                    */
  --gk-gold-hover:  #d8b877;              /* hover-light gold                */
  --gk-gold-glow:   rgba(201,161,90,0.10);
  --gk-bg:          #08090b;              /* near-black backdrop / dark text */
}

/* ---------------------------------------------------------------------------
   TEXT  (text-cyan-*  ->  gold)
   --------------------------------------------------------------------------- */
.text-cyan-400,
.text-cyan-500,
.text-\[\#00f0ff\]            { color: var(--gk-gold) !important; }
.text-cyan-400\/60,
.text-cyan-500\/60           { color: rgba(var(--gk-gold-rgb), 0.6) !important; }
.hover\:text-cyan-300:hover  { color: var(--gk-gold-hover) !important; }

/* ---------------------------------------------------------------------------
   BACKGROUND  (bg-cyan-*  ->  gold ; opacity variants -> translucent gold)
   --------------------------------------------------------------------------- */
.bg-cyan-400,
.bg-cyan-500,
.bg-cyan-600                 { background-color: var(--gk-gold) !important; }
.bg-cyan-400\/5,
.bg-cyan-500\/5,
.bg-\[\#00f0ff\]\/5          { background-color: rgba(var(--gk-gold-rgb), 0.05) !important; }
.bg-cyan-400\/8              { background-color: rgba(var(--gk-gold-rgb), 0.08) !important; }
.bg-cyan-400\/10,
.bg-cyan-500\/10,
.bg-\[\#00f0ff\]\/10         { background-color: rgba(var(--gk-gold-rgb), 0.10) !important; }
.bg-cyan-500\/20,
.bg-cyan-600\/20,
.bg-\[\#00f0ff\]\/20         { background-color: rgba(var(--gk-gold-rgb), 0.20) !important; }
.hover\:bg-cyan-300:hover,
.hover\:bg-cyan-400:hover    { background-color: var(--gk-gold-hover) !important; }
.hover\:bg-cyan-600:hover    { background-color: #b8923f !important; }
.hover\:bg-cyan-700:hover    { background-color: var(--gk-gold-dim) !important; }

/* ---------------------------------------------------------------------------
   BORDER  (border-cyan-*  ->  gold ; opacity variants -> translucent gold)
   --------------------------------------------------------------------------- */
.border-cyan-400,
.focus\:border-cyan-400:focus,
.focus\:border-cyan-500:focus,
.focus\:border-kensai-cyan-500:focus,
.hover\:border-kensai-cyan-500:hover   { border-color: var(--gk-gold) !important; }
.border-cyan-500\/10                    { border-color: rgba(var(--gk-gold-rgb), 0.10) !important; }
.border-cyan-400\/20,
.border-cyan-500\/20                    { border-color: rgba(var(--gk-gold-rgb), 0.20) !important; }
.border-cyan-400\/30,
.border-cyan-500\/30,
.border-\[\#00f0ff\]\/30,
.hover\:border-cyan-400\/30:hover,
.hover\:border-cyan-500\/30:hover       { border-color: rgba(var(--gk-gold-rgb), 0.30) !important; }
.hover\:border-cyan-500\/40:hover       { border-color: rgba(var(--gk-gold-rgb), 0.40) !important; }
.border-cyan-500\/50,
.focus\:border-cyan-500\/50:focus,
.hover\:border-cyan-400\/50:hover,
.hover\:border-cyan-500\/50:hover       { border-color: rgba(var(--gk-gold-rgb), 0.50) !important; }

/* ---------------------------------------------------------------------------
   GRADIENTS  (from-/via-/to-cyan-*  ->  gold stops)
   from-* rules first, to-* after so `to-` wins the shared --tw-gradient-to.
   --------------------------------------------------------------------------- */
.from-cyan-400,
.from-kensai-cyan-500 {
  --tw-gradient-from: var(--gk-gold) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(var(--gk-gold-rgb), 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.hover\:from-kensai-cyan-400:hover {
  --tw-gradient-from: var(--gk-gold-hover) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(216,184,119,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-cyan-400\/5,
.from-cyan-500\/5 {
  --tw-gradient-from: rgba(var(--gk-gold-rgb), 0.05) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(var(--gk-gold-rgb), 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-cyan-400\/10,
.from-cyan-500\/10,
.from-cyan-900\/10,
.from-\[\#00f0ff\]\/10 {
  --tw-gradient-from: rgba(var(--gk-gold-rgb), 0.10) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(var(--gk-gold-rgb), 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-cyan-600\/20 {
  --tw-gradient-from: rgba(var(--gk-gold-rgb), 0.20) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(var(--gk-gold-rgb), 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-cyan-400\/40 {
  --tw-gradient-from: rgba(var(--gk-gold-rgb), 0.40) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(var(--gk-gold-rgb), 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
/* to-* (must follow from-* so the shared --tw-gradient-to resolves to these) */
.to-cyan-200                       { --tw-gradient-to: var(--gk-gold-hover) var(--tw-gradient-to-position) !important; }
.to-cyan-400                       { --tw-gradient-to: var(--gk-gold) var(--tw-gradient-to-position) !important; }
.to-kensai-cyan-600                { --tw-gradient-to: var(--gk-gold-dim) var(--tw-gradient-to-position) !important; }
.hover\:to-kensai-cyan-500:hover   { --tw-gradient-to: var(--gk-gold) var(--tw-gradient-to-position) !important; }

/* ---------------------------------------------------------------------------
   RING  (focus/focus-visible ring-kensai-cyan-*  ->  gold)
   --------------------------------------------------------------------------- */
.focus\:ring-kensai-cyan-500\/20:focus        { --tw-ring-color: rgba(var(--gk-gold-rgb), 0.20) !important; }
.focus-visible\:ring-kensai-cyan-500:focus-visible { --tw-ring-color: var(--gk-gold) !important; }

/* ---------------------------------------------------------------------------
   MISC  (accent-color, cyan glow shadow)
   --------------------------------------------------------------------------- */
.accent-cyan-500                   { accent-color: var(--gk-gold) !important; }
.hover\:shadow-glow-cyan-sm:hover  { box-shadow: 0 0 20px rgba(var(--gk-gold-rgb), 0.25) !important; }

/* ---------------------------------------------------------------------------
   GOLD BUTTON TEXT  —  brand rule: dark text on a gold button.
   Scoped: fires ONLY when a cyan->gold background/gradient utility co-occurs
   with .text-white on the SAME element (the primary CTA buttons). Plain
   .text-white elsewhere is untouched. Two-class specificity + !important.
   --------------------------------------------------------------------------- */
.bg-cyan-400.text-white,
.bg-cyan-500.text-white,
.bg-cyan-600.text-white,
.from-cyan-400.text-white,
.from-cyan-500.text-white,
.from-kensai-cyan-500.text-white   { color: var(--gk-bg) !important; }