/* ====================================================================
   Kesefle brand tokens — shared visual primitives.
   Linked from every HTML page so any page can use these classes
   and get the homepage's exact look.

   Added 2026-05-26 to fix .holo-text rendering as flat white on
   non-homepage pages (the class was inlined in index.html only).

   Keep this file SMALL. Add a class only when it appears on > 1
   page AND its absence is visible. Page-specific decoration
   stays inline.
   ==================================================================== */

/* ---- Palette tokens (Steven 2026-05-27 high-tech upgrade) ---------
   Kesefle cyan/teal stays the PRIMARY brand. The new tokens (purple/
   orange/red) are SECONDARY accents per his brief:
     - red/pink   => urgent, error, high-risk
     - orange     => warning, pending
     - purple     => premium, pro, AI, insights
     - dark navy  => strong contrast areas
   Used by .kfl-btn-gradient + future high-tech components. */
:root {
  --k-dark:   #171721;
  --k-purple: #872B97;
  --k-orange: #FF7130;
  --k-red:    #FF3C68;
  --k-cyan:   #06B6D4;
  --k-teal:   #14B8A6;
  /* Gradient steps -- cyan -> purple. Direction matches Steven's
     screenshot (left=blue/cyan, right=purple). Use 135deg for
     diagonal lift on buttons. */
  --k-grad-primary: linear-gradient(135deg, #06B6D4 0%, #6366F1 45%, #872B97 100%);
  --k-grad-primary-hover: linear-gradient(135deg, #0891B2 0%, #4F46E5 45%, #6B21A8 100%);
  --k-grad-text: linear-gradient(110deg, #06B6D4 0%, #6366F1 45%, #872B97 100%);
}

/* ---- Primary gradient button (Steven 2026-05-27 brand upgrade) ----
   Use on any primary CTA: "התחל חינם", "הרשמה", "התחבר", "שדרג", etc.
   Replaces flat bg-brand-600 / bg-cyan-600 / hard-coded #0891b2 cyan.

   Visual: cyan -> indigo -> purple diagonal, white text, soft glow.
   Hover: deeper saturation + lift. Active: shrink + glow.
   Accessible: contrast meets AA on white text. */
.kfl-btn-gradient {
  background-image: var(--k-grad-primary);
  color: #FFFFFF !important;
  border: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 20px -8px rgba(99, 102, 241, 0.55),
              0 2px 6px -2px rgba(135, 43, 151, 0.35);
  transition: background-image 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.kfl-btn-gradient:hover {
  background-image: var(--k-grad-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(99, 102, 241, 0.65),
              0 4px 10px -4px rgba(135, 43, 151, 0.45);
}
.kfl-btn-gradient:active { transform: translateY(0) scale(0.99); }
.kfl-btn-gradient:focus-visible {
  outline: 2px solid #6366F1;
  outline-offset: 3px;
}
.kfl-btn-gradient[disabled],
.kfl-btn-gradient.is-disabled {
  background-image: linear-gradient(135deg, #94A3B8 0%, #64748B 100%);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ---- Logo wordmark gradient (Steven 2026-05-27) ------------------
   Use on the "כספ'לה" wordmark wherever it appears in the header,
   footer, sign-in card, etc. Same gradient palette as .kfl-btn-gradient
   so logo + CTA feel unified.

   Use as: <span class="kfl-logo-text">כספ'לה</span>
   Or wrap the whole logo link if you want the underline + emoji
   to inherit the gradient too. */
.kfl-logo-text {
  background-image: var(--k-grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- Global override: every legacy primary brand button gets the
   gradient automatically (Steven 2026-05-27).
   Targets the existing Tailwind patterns used across the site so
   we don't have to touch every page. Only overrides when the
   button is a clear PRIMARY (filled brand color), not ghost
   variants. Hover + focus colors handled via the .kfl-btn-gradient
   chain above to stay consistent. */
a.bg-brand-600, button.bg-brand-600,
a.bg-brand-500, button.bg-brand-500,
a.bg-cyan-600, button.bg-cyan-600,
a.bg-cyan-500, button.bg-cyan-500 {
  background-image: var(--k-grad-primary) !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  transition: background-image 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
a.bg-brand-600:hover, button.bg-brand-600:hover,
a.bg-brand-500:hover, button.bg-brand-500:hover,
a.bg-cyan-600:hover, button.bg-cyan-600:hover,
a.bg-cyan-500:hover, button.bg-cyan-500:hover,
a.hover\:bg-brand-700:hover, button.hover\:bg-brand-700:hover,
a.hover\:bg-cyan-700:hover, button.hover\:bg-cyan-700:hover {
  background-image: var(--k-grad-primary-hover) !important;
  transform: translateY(-1px);
}

/* ---- holographic gradient text (used on hero headings) ----------- */
@keyframes holo-sweep {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
.holo-text {
  background-image: linear-gradient(110deg,
    #0891b2  0%,
    #a855f7 25%,
    #06b6d4 50%,
    #a855f7 75%,
    #0891b2 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: holo-sweep 5s linear infinite;
}

/* ---- aurora gradient mesh (premium depth background) ------------- */
.aurora {
  background-image:
    radial-gradient(at 18% 22%, rgba( 79, 70,229,0.22) 0px, transparent 50%),
    radial-gradient(at 82% 18%, rgba( 99,102,241,0.20) 0px, transparent 55%),
    radial-gradient(at 55% 90%, rgba(244,114,182,0.18) 0px, transparent 55%),
    radial-gradient(at 12% 78%, rgba( 56,189,248,0.20) 0px, transparent 55%);
}

/* ---- subtle dot-grid texture (paired with currentColor) ---------- */
.dotgrid {
  background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
  background-size: 24px 24px;
}

/* ---- reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .holo-text { animation: none !important; }
}

/* ====================================================================
   PR-W3 (2026-05-27): Status-state chip palette.
   Steven's brief: use the new palette as ACCENTS for state:
     - red/pink   => urgent, error, high-risk
     - orange     => warning, pending
     - purple     => premium, pro, AI, insights
     - emerald    => success, ok, healthy
     - cyan/teal  => info, neutral-positive (already the brand primary)
     - slate      => neutral, default
   These chip utilities work site-wide (.html + admin + dashboard) so
   "Pro" / "תקוע" / "מסוכן" / "תקציב ירוק" all render with consistent
   visual weight + dark-mode-aware contrast.

   Usage:
     <span class="kfl-chip kfl-chip-premium">Pro</span>
     <span class="kfl-chip kfl-chip-warn">תקוע 7 ימים</span>
     <span class="kfl-chip kfl-chip-danger">חריגה</span>
     <span class="kfl-chip kfl-chip-success">במסלול</span>
     <span class="kfl-chip kfl-chip-info">מידע</span>
     <span class="kfl-chip kfl-chip-neutral">לא ידוע</span>

   Pair with .kfl-status-dot inside the chip for a colored dot:
     <span class="kfl-chip kfl-chip-success">
       <span class="kfl-status-dot"></span> במסלול
     </span>
   ==================================================================== */
.kfl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.kfl-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Success / OK / healthy — emerald */
.kfl-chip-success { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
html.dark .kfl-chip-success { background: rgba(4,120,87,0.18); color: #6EE7B7; border-color: rgba(167,243,208,0.35); }

/* Warning / pending / attention — orange (Steven palette #FF7130) */
.kfl-chip-warn { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
html.dark .kfl-chip-warn { background: rgba(255,113,48,0.18); color: #FDBA74; border-color: rgba(254,215,170,0.35); }

/* Danger / urgent / error / high-risk — red/pink (Steven palette #FF3C68) */
.kfl-chip-danger { background: #FFF1F2; color: #BE123C; border-color: #FECDD3; }
html.dark .kfl-chip-danger { background: rgba(255,60,104,0.18); color: #FDA4AF; border-color: rgba(254,205,211,0.35); }

/* Premium / Pro / AI / insights — purple (Steven palette #872B97) */
.kfl-chip-premium { background: #FAF5FF; color: #6B21A8; border-color: #E9D5FF; }
html.dark .kfl-chip-premium { background: rgba(135,43,151,0.22); color: #D8B4FE; border-color: rgba(216,180,254,0.35); }

/* Info / neutral-positive — cyan (Kesefle brand primary) */
.kfl-chip-info { background: #ECFEFF; color: #0E7490; border-color: #A5F3FC; }
html.dark .kfl-chip-info { background: rgba(14,116,144,0.18); color: #67E8F9; border-color: rgba(165,243,252,0.35); }

/* Neutral / default / unknown — slate */
.kfl-chip-neutral { background: #F8FAFC; color: #475569; border-color: #E2E8F0; }
html.dark .kfl-chip-neutral { background: rgba(71,85,105,0.18); color: #CBD5E1; border-color: rgba(226,232,240,0.35); }

/* ====================================================================
   Critical first-paint fallback (added 2026-06-03, FE/SEO polish audit).

   Every public page styles itself through the Tailwind PLAY CDN
   (<script src="https://cdn.tailwindcss.com">), which is a render-
   blocking script: if that CDN is slow or unreachable the page paints
   as unstyled black serif text on white (FOUC).

   brand.css is a LOCAL stylesheet (served by Vercel, not the CDN), so
   these base element rules are available on first paint regardless of
   the CDN. They mirror the values the Tailwind utilities on <body>
   (bg-ink-50 / text-ink-900 / Heebo) would produce, so once Tailwind
   loads nothing shifts -- the loaded look is identical.

   Scope is intentionally tiny: base typography + background + RTL only.
   NO layout utilities here (those stay the CDN's job) so we never fight
   Tailwind's specificity. Light-mode is the default; dark is opt-in via
   the existing `.dark` class the site already toggles. */
html { background-color: #f7f8fb; }
html.dark { background-color: #070b16; }
body {
  font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #0f1422;
  background-color: #f7f8fb;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.dark body { color: #ffffff; background-color: #070b16; }
/* Keep Hebrew pages RTL on first paint even before Tailwind/attribute
   styling settles (pages already set dir="rtl" on <html>; this is a
   belt-and-suspenders default for the body box). */
[dir="rtl"] body { direction: rtl; }

/* Modifier: subtle gradient backdrop for premium chips on hero/CTAs.
   Use sparingly -- it's eye-catching by design. */
.kfl-chip-premium.kfl-chip-gradient {
  background-image: linear-gradient(135deg, #FAF5FF 0%, #FCE7F3 100%);
  color: #6B21A8;
  border-color: #E9D5FF;
}
html.dark .kfl-chip-premium.kfl-chip-gradient {
  background-image: linear-gradient(135deg, rgba(135,43,151,0.22) 0%, rgba(255,60,104,0.18) 100%);
  color: #D8B4FE;
}