/*
 * Next Is Now — verified brand tokens.
 *
 * Source: getComputedStyle() pulled directly from https://nextisnowconsulting.com/
 * on 2026-05-20. These values match the live website pixel-for-pixel so the
 * assessment tool reads as a true subdomain of Jeff's site.
 *
 * Do NOT use Elementor's default theme tokens (e.g. #6EC1E4 sky blue, #61CE70
 * green) — they're stale defaults present in the stylesheet but never rendered
 * on any actual section of the site.
 *
 * If Leyla ever sends an official brand guide, that supersedes this file.
 */

:root {
  /* ── Surface ─────────────────────────────────────────────────── */
  --nin-navy:           #031D4B;   /* Section bg (page color)         */
  --nin-navy-deep:      #021339;   /* Deeper variant for elevation    */
  --nin-navy-pinstripe: #0F1530;   /* Subtle pinstripe accent         */
  --nin-ink:            #FFFFFF;   /* Default text on navy            */
  --nin-ink-muted:      rgba(255,255,255,0.72);
  --nin-ink-subtle:     rgba(255,255,255,0.48);

  /* ── Brand gold family ───────────────────────────────────────── */
  --nin-gold:           #D7A747;   /* Primary gold — CTAs, headings   */
  --nin-gold-bright:    #EEDA97;   /* Hover / highlight               */
  --nin-gold-deep:      #A47F43;   /* Pressed state                   */
  --nin-gold-shadow:    #48360F;   /* Deep shadow (gradient stop)     */

  /* ── Metallic gold gradient (for hero headlines only) ─────────── */
  --nin-gold-gradient: linear-gradient(
    180deg,
    #48360F 0%,
    #DEAF61 8%,
    #FBFBC0 24%,
    #DEAF61 50%,
    #A47F43 100%
  );

  /* ── Typography ──────────────────────────────────────────────── */
  /* Headlines use Plantagenet Cherokee on the live site. It's an
     Apple-only system font, so we fall back to Cinzel (Google Fonts)
     which has nearly identical Roman-capital character. */
  --nin-font-display:
    "Plantagenet Cherokee", "Cinzel", "Trajan Pro", "Cormorant Garamond",
    Georgia, "Times New Roman", serif;

  /* Body / UI uses Lustria (Google Fonts) on the live site. */
  --nin-font-body:
    "Lustria", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* Optional sans for dense UI tables / forms where Lustria is too
     literary. Pair with care — only use where the serif feels heavy. */
  --nin-font-ui-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ── Functional colors (keep separate from brand) ────────────── */
  --nin-success:        #16a34a;   /* "Owner done" / valid             */
  --nin-warning:        #f59e0b;   /* In progress                      */
  --nin-danger:         #dc2626;   /* Score deltas / errors            */
  --nin-info:           #2563eb;   /* Owner-column accent              */

  /* ── Surface neutrals (Mockup 1c — multi-owner consensus) ──────
     The consensus view layers a parchment page bg, a warm-cream surface,
     and a "navy wash" owner-row tint over the existing navy/gold pair.
     Added in Session 5 (Phase 1C slice 1) so OwnersTable + the consensus
     panel never hard-code these literals. */
  --nin-parchment:      #F9F7F2;   /* Page background / surface tray   */
  --nin-cream:          #FBF8EF;   /* Soft cream — banner backgrounds  */
  --nin-cream-deep:     #FBF4DE;   /* Pill backgrounds                 */
  --nin-border-warm:    #E5DDC8;   /* Hairline borders on cream/white  */
  --nin-border-warm-soft:#F0E9D5;  /* Inner row dividers               */
  --nin-navy-wash:      #EEF1F8;   /* Light navy wash for owner rows   */
  --nin-navy-border:    #C5CFE2;   /* Soft slate-blue secondary border */
}

/* ── Utility classes for the metallic gradient effect ─────────────
   Apply to display headlines only. Background-clip:text creates the
   shimmer; the fallback gold color shows on browsers without support. */
.nin-text-gold-shine {
  color: var(--nin-gold);
  background: var(--nin-gold-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Pinstripe pattern for branded surfaces ───────────────────────
   Matches the diagonal pinstripes visible on the website hero. */
.nin-bg-pinstripe {
  background-color: var(--nin-navy);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 60px,
    rgba(255,255,255,0.025) 60px,
    rgba(255,255,255,0.025) 90px
  );
}