/* ═══ kreaplex BRAND KIT — "SIGNAL" ═══════════════════════════════════════════
   Paired with the signal_violet base theme (the Signal family — see
   reference_add_theme), and built on the construction that
   lovable / replit / base44 / emergent all share: a TRUE-NEUTRAL carbon canvas
   (no hue anywhere in the greys), white headings, and exactly ONE electric
   accent spent sparingly. Temperature is what does the work here — the previous
   warm brown-black + bone + ember palette read hospitality, not software.

   --brand is the ACCENT, not a neutral, so the CTA pill on these pages is the same
   pill as the nav CTA on /about and the button on /login. Headings use their own
   --brand-head (white) so the page is not a wall of one hue: the accent appears
   only on CTAs, stat numbers, timeline markers, pips and the closing slab.

   SCOPING: everything below hangs off .kp-night, the class on <wrap> in the
   public_night.xml page layout. The kit is registered on the whole PUBLIC zone,
   but only pages using that layout opt in — so /login, /register, /about, /faq
   and the legal pages keep the base theme untouched. Never registered on USERS,
   so it cannot reach the dashboard. (The .kp-night selector and the layout name
   are kept as-is deliberately: they are structural hooks referenced by the page
   layout and every block on it, and renaming them buys nothing but breakage.)
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

.kp-night{
  /* type — Sora is a geometric grotesk with a near-monolinear skeleton and a
     tall x-height: the current default voice of AI/developer products, and the
     same face the signal_violet theme sets for headings, so the front page and
     the rest of the site speak with one accent. Inter for body.
     Mono is a third role: prompts, ledger lines and phase labels are DATA. */
  --font-display:'Sora', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --brand-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --display-weight:700;
  --display-tracking:-0.025em;
  --text-hero:clamp(2.75rem, 6.5vw, 5rem);
  --text-h2:clamp(2rem, 4vw, 3.1rem);
  --text-h3:clamp(1.2rem, 1.9vw, 1.45rem);
  --text-lead:1.1875rem;

  /* palette — mirrors the signal_violet theme tokens exactly, so anything that
     slips a pin degrades to something adjacent rather than something alien.
     Swapping the Signal accent is this block plus nothing else: every pin below
     is written against the four role tokens, never against a literal. */
  --brand:#6D4AFF;            /* violet — CTA fill, markers, closing slab */
  /* ⚠️ hover DARKENS here. On signal_mint --brand-strong was a brighter mint,
     because mint is a light colour carrying dark text. Violet is a DARK colour
     carrying white text, so brightening the fill drops white below 4.5:1 —
     #8B6EFF is only 3.6:1. Going deeper keeps it at ~7:1. */
  --brand-strong:#5433E0;
  --brand-on:#FFFFFF;         /* text on the violet — white, not near-black */
  --brand-head:#FFFFFF;       /* headings + wordmarks — deliberately NOT the accent */
  /* ⚠️ --brand-accent is the LEGIBLE-ON-CARBON step, not a duplicate of --brand.
     On mint the two were the same colour and the distinction was invisible;
     #6D4AFF is only ~3.8:1 on carbon, which is fine as a button FILL and bad as
     a pip, bullet, icon or stat number. Everything small reads this token.
     Raised #A78BFF -> #B8A5FF (6.9:1 -> 8.7:1) to match the theme: in the
     Krea+Plex wordmark the accent sits against WHITE at 18.5:1, and at 2.7x
     dimmer it read as a smaller, higher word despite identical geometry. Must
     stay equal to the theme's --primary-strong or the front page and the login
     page show two different violets. */
  --brand-accent:#B8A5FF;     /* the only saturated colour on the page */
  --brand-highlight:#B8A5FF;
  --brand-ink:#08080A;        /* deepest well — hero overlay, --ink bands, footer */
  --brand-cream:#131317;      /* card surface (this token means "card bg" in the blocks) */
  --brand-soft:#1A1A20;       /* soft band, eyebrow chip, category tile */

  /* rhythm + motif. A filled square reads as a status pip — "the light is on" —
     in the eyebrow AND as a bullet in .spotlight li / .plan-features li, so it
     carries the same meaning in both places. An emoji would not. */
  --section-y:6.5rem;
  --brand-eyebrow-mark:"\25AA";

  /* kit-local extensions. The Gen-2 contract assumes a LIGHT canvas, so going
     dark needs a hairline that is light-on-dark and body/muted greys that the
     theme cannot supply. Contained: PUBLIC zone only. */
  --brand-hairline:rgba(255,255,255,.10);
  --brand-body:#D6D6DE;
  --brand-muted:#8A8A94;

  /* --text-color-light is read by .section-lead, .stat-label, .review-who small,
     .bento-item p and .timeline-item p. Repoint it or every one of them renders
     as near-black on near-black. */
  --text-color-light:#8A8A94;
}

/* ── dark-canvas pinning ───────────────────────────────────────────────────────
   public.css paints the page from THEME tokens (body gradient at :3, main colour
   at :159). Without these the page is broken, not merely differently coloured. */
body:has(.kp-night){ background:#0B0B0E; background-image:none; }
.kp-night{ color:var(--brand-body); }
.kp-night main{ color:var(--brand-body); }

/* public.css:30-35 colours every h1/h2/h3 with --on-primary, which is a dark navy
   on violet_pro. None of the Gen-2 section blocks set a heading colour of their
   own, so without this every section title renders navy-on-near-black. This is
   the single most important pin in the file. */
.kp-night h1,
.kp-night h2,
.kp-night h3,
.kp-night .section-head h2,
.kp-night .section-title,
.kp-night .spotlight h2,
.kp-night .bento-item h3,
.kp-night .timeline-title,
.kp-night .plan-name{ color:var(--brand-head); }
.kp-night .section-lead{ color:var(--text-color-light); }
/* .section-head only styles h2 (public.css:1944); a page whose section head is an
   h1 (pricing) would otherwise fall back to the generic 2rem h1 and read smaller
   than the h2s further down the same page. */
.kp-night .section-head h1{ font-family:var(--font-display); font-weight:var(--display-weight);
                            font-size:var(--text-h2); letter-spacing:var(--display-tracking); margin:.6rem 0 0; }
/* the honesty chip row on /pricing reuses .trust-strip's type without its full-width
   band, so it needs its own spacing */
.kp-night .kp-chips{ display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; margin-top:1.75rem;
                     padding-top:1.25rem; border-top:1px solid var(--brand-hairline); background:none; }
.kp-night .faq-accordion-q{ color:var(--brand-head); }
.kp-night .faq-accordion-a{ color:var(--text-color-light); }
.kp-night .plan-desc{ color:var(--text-color-light); }
.kp-night .plan-features li{ color:var(--brand-body); }
.kp-night .spotlight li{ color:var(--brand-body); }
.kp-night .spotlight li::before{ color:var(--brand-accent); }
.kp-night .spotlight p{ color:var(--text-color-light); }
.kp-night .timeline-item p{ color:var(--text-color-light); }
/* the spotlight gradient is built from --brand-accent over --brand-cream, which
   on this canvas makes a full accent wash behind body copy; keep it a quiet dark
   panel instead — the accent has to stay scarce for the CTAs to carry weight */
.kp-night .spotlight{ background:linear-gradient(160deg, var(--brand-soft), var(--brand-cream)); }
.kp-night .timeline-item::before{ background:var(--brand-hairline); }

/* Gen-2 blocks hairline with color-mix(--brand-ink 8%) — invisible on dark. */
.kp-night .category-tile,
.kp-night .review-card,
.kp-night .showcase .product-card,
.kp-night .site-nav{ border-color:var(--brand-hairline); }

/* .feature-card is Gen-1 (public.css:603) and theme-driven, so it renders
   differently on violet_pro vs cloud_light. Pin all three of its colours. */
.kp-night .feature-card{ background:var(--brand-cream); border:1px solid var(--brand-hairline); }
.kp-night .feature-title{ color:var(--brand-head); }
.kp-night .feature-card p{ color:var(--text-color-light); }
.kp-night .feature-icon{ color:var(--brand-accent); }

/* Gen-1 .section-title (public.css:533) sets text-align:center at equal
   specificity to the Gen-2 rule, so centring leaks onto every use. */
.kp-night .section-title{ text-align:inherit; }
.kp-night .section.text-center .section-title{ text-align:center; }

.kp-night .hero--image p{ max-width:46ch; }
.kp-night .cta-form input{ color:var(--brand-on); }
.kp-night .section--ink{ background:var(--brand-ink); }

/* ── site chrome ───────────────────────────────────────────────────────────────
   The Gen-2 chrome blocks read --brand-cream two incompatible ways: .site-nav and
   the cards treat it as a SURFACE, while .site-footer treats it as LIGHT TEXT on
   ink. Both are true on a light page and only the first is true here, so every
   place the second meaning is assumed has to be pinned — otherwise the nav brand
   and links are --brand-ink on a dark bar (invisible) and the whole footer is
   near-black on near-black. */
.kp-night .site-nav{ background:color-mix(in srgb, var(--brand-cream) 88%, transparent);
                     backdrop-filter:blur(12px); }
.kp-night .site-nav-brand{ color:var(--brand-head); }
.kp-night .site-nav-brand span{ color:var(--brand-accent); }
.kp-night .site-nav-links a{ color:var(--brand-body); }
.kp-night .site-nav-links a:hover{ color:var(--brand-head); }
/* the line above is (0,2,0) and .site-nav-cta is (0,1,0), so without this the CTA
   pill inherits body colour and renders bone-on-bone */
.kp-night .site-nav-links a.site-nav-cta,
.kp-night .site-nav-links a.site-nav-cta:hover{ color:var(--brand-on); }

/* .trust-strip is the third place --brand-cream is assumed to be LIGHT TEXT
   (public.css:1982). On this canvas it is the dark card surface, so the strip
   renders near-black on near-black without this. */
.kp-night .trust-strip{ color:var(--brand-body); border-top:1px solid var(--brand-hairline); }
.kp-night .trust-strip span::before{ content:var(--brand-eyebrow-mark); color:var(--brand-accent); margin-right:.55rem; }

.kp-night .site-footer{ color:rgba(214,214,222,.68); }
.kp-night .site-footer-brand{ color:var(--brand-head); }
.kp-night .site-footer-brand span{ color:var(--brand-accent); }
.kp-night .site-footer h4{ color:var(--brand-head); }
.kp-night .site-footer a{ color:rgba(214,214,222,.60); }
.kp-night .site-footer a:hover{ color:var(--brand-accent); }
.kp-night .site-footer-bottom{ color:rgba(214,214,222,.48); }
/* .site-footer a is display:block, which is right for the link columns and wrong
   for the legal strip — without this each separator lands on its own line. */
.kp-night .site-footer-bottom a{ display:inline; padding:0; }

/* ── signature ─────────────────────────────────────────────────────────────────
   Restrained on purpose: this is infrastructure, not a craft shop. No tilted
   sticker eyebrow, no gradient underline swash, and no gradient-clipped headline
   text — that last one is the templated AI-page move. White Sora at -0.025em is
   stronger than any gradient. The whole personality budget is: mono eyebrows,
   an accent pip, and CTAs that glow rather than darken. */
.kp-night .eyebrow{ font-family:var(--brand-mono); font-weight:500; letter-spacing:.18em;
          background:var(--brand-soft); border:1px solid var(--brand-hairline); color:var(--brand-body); }
.kp-night .eyebrow::before{ color:var(--brand-accent); }
.kp-night .hero--image .eyebrow{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:#fff; }
/* dark wash on a light slab, light wash on a dark one — follows --brand-on */
.kp-night .cta-band .eyebrow{ background:color-mix(in srgb, var(--brand-on) 12%, transparent);
                              border-color:color-mix(in srgb, var(--brand-on) 24%, transparent);
                              color:var(--brand-on); }

.kp-night .btn-brand{ box-shadow:0 0 0 0 transparent; transition:box-shadow .2s ease, transform .15s ease, background .2s ease; }
.kp-night .btn-brand:hover{ box-shadow:0 8px 34px -10px color-mix(in srgb, var(--brand) 55%, transparent); }
.kp-night .btn-brand:active, .kp-night .btn-brand-ink:active{ transform:translateY(1px); }
/* .btn-brand-ink means "the inverse of the surface you are sitting on". Its own
   rule hardcodes that as ink-bg + --brand-cream text, which is right on a light
   page and dark-on-dark here. Flip it: bone on the dark sections, and genuinely
   ink only inside the bone .cta-band slab. */
.kp-night .btn-brand-ink{ background:var(--brand); color:var(--brand-on); }
.kp-night .btn-brand-ink:hover{ background:var(--brand-strong); }
.kp-night .cta-band .btn-brand-ink{ background:var(--brand-ink); color:var(--brand-accent); }
.kp-night .cta-band .btn-brand-ink:hover{ background:#000; }
.kp-night .btn-brand--ghost{ border-color:var(--brand-hairline); color:var(--brand-body); }
.kp-night .btn-brand--ghost:hover{ border-color:var(--brand-accent); color:var(--brand-accent); }

/* the accent shows up in exactly three places beyond the CTAs */
.kp-night .faq-accordion-q::after{ color:var(--brand-accent); }
.kp-night .timeline-marker{ background:var(--brand); color:var(--brand-on); }
.kp-night .stat-num{ color:var(--brand-accent); }

/* the CTA band is bone with dark text — the inversion that pays off a dark page */
.kp-night .cta-band{ color:var(--brand-on); }
.kp-night .cta-band h2{ color:var(--brand-on); }
.kp-night .cta-band p{ color:color-mix(in srgb, var(--brand-on) 78%, transparent); }

@media (prefers-reduced-motion: reduce){
  .kp-night .btn-brand{ transition:none; }
  .kp-night .btn-brand:hover{ box-shadow:none; }
}