/* ============================================================
   NUMINOVA — DESIGN TOKENS · colors_and_type.css
   ============================================================
   Premium advisory firm for luxury wellness, longevity, resort,
   spa, and hospitality operators.

   Style thesis: Quiet luxury · Strategic clarity · Discreet intelligence

   Structural base adapted from Affluent Consultant (navy/gold/cream
   advisory system) but re-pitched for the wellness/hospitality world:
     · royal-blue DOMINANCE  →  deep navy ink (navy as ground, blue as accent)
     · cream                 →  crisp white + cool light grey (no beige)
     · AC gold (kept)        →  refined confident gold + clarity blue for data/AI
     · Playfair (kept)       →  Playfair Display headlines + Hanken Grotesk body + Plex Mono

   Load order: this file first, then page CSS.
   Fonts are pulled from Google Fonts (see @import). If you have the
   licensed brand fonts on disk, drop them in /fonts and swap the
   @font-face in.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {

  /* ─── COLOR · NAVY INK GROUP (authority, dark surfaces) ────────────────── */
  /* Carried from the Affluent Consultant donor (navy authority) and the
     current NumiNova blue-on-white brand. Deep, confident, boutique-strategy —
     never bright/generic royal blue. These hold hero/footer + dark surfaces. */
  --nn-ink:            #0C1622;   /* Deepest navy-black — hero, footer, dark-mode base */
  --nn-navy:           #16243B;   /* Primary dark surface — buttons, panels, wordmark */
  --nn-navy-soft:      #243651;   /* Secondary dark surface, hover on dark */
  --nn-slate-mute:     #5A6B82;   /* Muted blue-grey — quiet UI lines, secondary on dark */

  /* ─── COLOR · CRISP NEUTRALS (white + cool light grey, NOT cream/beige) ── */
  --nn-ivory:          #FFFFFF;   /* Primary page background — pure radiant white */
  --nn-alabaster:      #FBFCFD;   /* Soft alt surface */
  --nn-paper:          #FFFFFF;   /* Crisp surface — cards, sheets, report pages */
  --nn-stone-100:      #EEF4FB;   /* Cool bright band — section alternate (radiant, not grey) */
  --nn-stone-200:      #E0E4EA;   /* Hairline borders, dividers */
  --nn-stone-300:      #C7CDD6;   /* Stronger borders, form outlines */
  --nn-mist:           #EAF0F8;   /* Cool blue tint — data / clarity surfaces */

  /* ─── COLOR · ACCENTS ──────────────────────────────────────────────────── */
  /* Gold is the boutique-luxury accent (refined from AC #C9A84C). Signal blue
     is the modern AI/data accent — reserved for data, AI, links & interactive. */
  --nn-gold:           #BE9A4E;   /* Primary accent — eyebrows, rule, CTAs, hover. Confident gold */
  --nn-gold-deep:      #94762F;   /* Gold text on light for contrast, pressed */
  --nn-gold-soft:      #DCC079;   /* Lighter gold — accents & dividers on dark */
  --nn-copper:         #B0532E;   /* Copper — rare warm accent: urgency, single highlight. Max 1 per view. Optional; not used in core kits */
  --nn-blue:           #2D5CE6;   /* Signal blue — luminous modern accent for AI, data, links, interactive states */

  /* ─── COLOR · TEXT ─────────────────────────────────────────────────────── */
  --nn-text:           #142233;   /* Primary body text — deep navy-ink (~13:1 on white) */
  --nn-text-strong:    #0C1622;   /* Highest-contrast headings */
  --nn-text-secondary: #3A475C;   /* Secondary text (~8:1) */
  --nn-text-muted:     #6B7789;   /* Metadata, captions, placeholders (AA) */
  --nn-text-disabled:  #9AA3B2;   /* Disabled */
  --nn-text-inverse:   #F6F7F9;   /* Text on navy/ink surfaces */
  --nn-text-inverse-muted:  rgba(246,247,249,0.74);  /* Secondary text on dark */
  --nn-text-inverse-subtle: rgba(246,247,249,0.50);  /* Tertiary / micro-copy on dark */

  /* ─── COLOR · BORDERS ──────────────────────────────────────────────────── */
  --nn-border:         #E0E4EA;   /* Default hairline */
  --nn-border-strong:  #C7CDD6;   /* Card outlines, inputs */
  --nn-border-accent:  #BE9A4E;   /* Gold rule */
  --nn-border-inverse: rgba(246,247,249,0.20);  /* Hairline on dark */

  /* ─── COLOR · SEMANTIC ─────────────────────────────────────────────────── */
  --nn-success:        #1F7A4D;   --nn-success-soft:  #ECEFF3;   /* deep green text only; neutral fill (no pastel green) */
  --nn-warning:        #8A6314;   --nn-warning-soft:  #F5ECD6;
  --nn-error:          #A63D33;   --nn-error-soft:    #F6E6E2;
  --nn-info:           #2D5CE6;   --nn-info-soft:     #E8EDFD;

  /* ─── COLOR · GRADIENTS (use sparingly — strategy houses favour flat) ──── */
  --nn-grad-ink:       linear-gradient(155deg, #0C1622 0%, #243651 130%); /* @kind color */
  /* Modern luminous dark — cool blue glow + faint gold, over deep navy. Subtle, never neon. */
  --nn-grad-hero:      radial-gradient(70% 60% at 74% 6%, rgba(45,92,230,0.30) 0%, rgba(45,92,230,0) 58%),
                       radial-gradient(55% 55% at 10% 98%, rgba(190,154,78,0.16) 0%, rgba(190,154,78,0) 55%),
                       linear-gradient(158deg, #0A111E 0%, #16243B 70%, #1B2C46 100%); /* @kind color */
  --nn-glow-blue:      radial-gradient(60% 70% at 80% 0%, rgba(45,92,230,0.22) 0%, rgba(45,92,230,0) 60%); /* @kind color */
  --nn-grad-veil:      linear-gradient(180deg, rgba(12,22,34,0) 0%, rgba(12,22,34,0.80) 100%); /* @kind color */ /* image protection scrim */
  --nn-grad-gold:      linear-gradient(135deg, #94762F 0%, #DCC079 50%, #94762F 100%); /* @kind color */

  /* ─── TYPOGRAPHY · FAMILIES ────────────────────────────────────────────── */
  --nn-font-display:   'Playfair Display', 'Hoefler Text', Georgia, serif;  /* Editorial headlines — kept from the Affluent Consultant donor */
  --nn-font-body:      'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* Body & UI */
  --nn-font-mono:      'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Data, metrics, eyebrows, the intelligence layer */

  --nn-fw-regular:     400; /* @kind font */
  --nn-fw-medium:      500; /* @kind font */
  --nn-fw-semibold:    600; /* @kind font */
  --nn-fw-bold:        700; /* @kind font */

  /* ─── TYPOGRAPHY · TYPE SCALE (desktop) ────────────────────────────────── */
  /* Display & H1–H3 are Playfair Display (serif). H4 is the serif→sans transition.
     H5/H6 + eyebrow are Hanken Grotesk / Plex Mono. */
  --nn-display:        5.5rem;    /* 88px — hero statement */
  --nn-h1:             4rem;      /* 64px — page title */
  --nn-h2:             2.75rem;   /* 44px — section title */
  --nn-h3:             2rem;      /* 32px — subsection */
  --nn-h4:             1.5rem;    /* 24px — card title (sans, medium) */
  --nn-h5:             1.0625rem; /* 17px — functional heading (sans, semibold) */
  --nn-h6:             0.8125rem; /* 13px — label heading (sans caps) */
  --nn-lead:           1.375rem;  /* 22px — intro paragraph */
  --nn-body:           1.0625rem; /* 17px — default text */
  --nn-body-sm:        0.9375rem; /* 15px — secondary */
  --nn-caption:        0.8125rem; /* 13px — metadata */
  --nn-overline:       0.75rem;   /* 12px — eyebrow / category label (mono, tracked) */
  --nn-mono:           0.9375rem; /* 15px — inline data */
  --nn-metric:         3.25rem;   /* 52px — hero metric (mono) */

  /* ─── TYPOGRAPHY · LINE HEIGHT & TRACKING ──────────────────────────────── */
  --nn-leading-tight:    1.04;   /* @kind font */ /* Display, H1 */
  --nn-leading-snug:     1.14;   /* @kind font */ /* H2, H3 */
  --nn-leading-normal:   1.35;   /* @kind font */ /* H4/H5, captions */
  --nn-leading-relaxed:  1.6;    /* @kind font */ /* body */
  --nn-leading-loose:    1.72;   /* @kind font */ /* lead, long-form report body */

  --nn-track-tight:      -0.02em;  /* @kind font */ /* Display / serif headings */
  --nn-track-snug:       -0.01em;  /* @kind font */ /* H3 */
  --nn-track-normal:     0; /* @kind font */
  --nn-track-wide:       0.04em;   /* @kind font */ /* H6 small caps */
  --nn-track-overline:   0.06em;   /* @kind font */ /* eyebrow / overline (mono, uppercase) */

  /* ─── SPACING (8pt-ish, generous for luxury whitespace) ────────────────── */
  --nn-space-1:  4px;   --nn-space-2:  8px;   --nn-space-3:  12px;
  --nn-space-4:  16px;  --nn-space-5:  20px;  --nn-space-6:  24px;
  --nn-space-8:  32px;  --nn-space-10: 40px;  --nn-space-12: 48px;
  --nn-space-16: 64px;  --nn-space-20: 80px;  --nn-space-24: 96px;
  --nn-space-32: 128px; --nn-space-40: 160px;

  --nn-section-y:        128px;  /* generous section rhythm — restraint = whitespace */
  --nn-section-y-tablet: 88px;
  --nn-section-y-mobile: 56px;
  --nn-card-pad:         32px;
  --nn-gutter:           24px;

  /* ─── BORDER RADIUS (small — luxury favours crisp, not bubbly) ─────────── */
  --nn-radius-xs:   2px;   /* tags, chips */
  --nn-radius-sm:   4px;   /* buttons, inputs */
  --nn-radius-md:   8px;   /* cards, panels */
  --nn-radius-lg:   14px;  /* large feature panels (sparingly) */
  --nn-radius-pill: 999px; /* pills/badges only */

  /* ─── SHADOWS (whisper-soft; default to hairline borders, not elevation) ─ */
  --nn-shadow-xs:  0 1px 2px rgba(12,22,34,0.04);
  --nn-shadow-sm:  0 2px 10px rgba(12,22,34,0.05);
  --nn-shadow-md:  0 10px 30px rgba(12,22,34,0.07);
  --nn-shadow-lg:  0 24px 60px rgba(12,22,34,0.10);
  --nn-shadow-focus: 0 0 0 3px rgba(190,154,78,0.34);  /* gold focus ring */

  /* ─── MOTION (calm, no bounce) ─────────────────────────────────────────── */
  --nn-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */ /* gentle ease-out */
  --nn-ease-inout:   cubic-bezier(0.45, 0, 0.15, 1); /* @kind other */
  --nn-dur-fast:     160ms; /* @kind other */
  --nn-dur-base:     260ms; /* @kind other */
  --nn-dur-slow:     520ms;   /* @kind other */ /* editorial reveals / image fades */

  /* ─── LAYOUT ───────────────────────────────────────────────────────────── */
  --nn-container:    1240px;
  --nn-container-narrow: 760px;  /* long-form reading measure */
  --nn-nav-h:        76px;

  /* ─── ICON SIZES (Lucide, 1.5px stroke, 24px grid) ─────────────────────── */
  --nn-icon-sm: 18px;  --nn-icon-md: 22px;  --nn-icon-lg: 28px;  --nn-icon-xl: 40px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply these classes (or copy the rules) for consistent type.
   ============================================================ */

.nn-display, .nn-h1, .nn-h2, .nn-h3 {
  font-family: var(--nn-font-display);
  font-weight: var(--nn-fw-medium);
  color: var(--nn-text-strong);
  margin: 0;
  text-wrap: balance;
}
.nn-display { font-size: var(--nn-display); line-height: var(--nn-leading-tight); letter-spacing: var(--nn-track-tight); font-weight: var(--nn-fw-regular); }
.nn-h1      { font-size: var(--nn-h1);      line-height: var(--nn-leading-tight); letter-spacing: var(--nn-track-tight); }
.nn-h2      { font-size: var(--nn-h2);      line-height: var(--nn-leading-snug);  letter-spacing: var(--nn-track-tight); }
.nn-h3      { font-size: var(--nn-h3);      line-height: var(--nn-leading-snug);  letter-spacing: var(--nn-track-snug); }

.nn-h4 {
  font-family: var(--nn-font-body);
  font-size: var(--nn-h4); font-weight: var(--nn-fw-medium);
  line-height: var(--nn-leading-normal); letter-spacing: var(--nn-track-normal);
  color: var(--nn-text-strong); margin: 0;
}
.nn-h5 {
  font-family: var(--nn-font-body);
  font-size: var(--nn-h5); font-weight: var(--nn-fw-semibold);
  line-height: var(--nn-leading-normal); color: var(--nn-text-strong); margin: 0;
}
.nn-h6 {
  font-family: var(--nn-font-body);
  font-size: var(--nn-h6); font-weight: var(--nn-fw-semibold);
  text-transform: none; letter-spacing: var(--nn-track-wide);
  color: var(--nn-text-secondary); margin: 0;
}

/* Eyebrow / overline — the recurring "label" device. Mono, gold, tracked. */
.nn-overline {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-overline); font-weight: var(--nn-fw-medium);
  text-transform: none; letter-spacing: var(--nn-track-overline);
  color: var(--nn-gold-deep);
}

.nn-lead {
  font-family: var(--nn-font-body);
  font-size: var(--nn-lead); font-weight: var(--nn-fw-regular);
  line-height: var(--nn-leading-loose); color: var(--nn-text-secondary);
  margin: 0; text-wrap: pretty;
}
.nn-body {
  font-family: var(--nn-font-body);
  font-size: var(--nn-body); font-weight: var(--nn-fw-regular);
  line-height: var(--nn-leading-relaxed); color: var(--nn-text); margin: 0;
  text-wrap: pretty;
}
.nn-body-sm { font-size: var(--nn-body-sm); }
.nn-caption {
  font-family: var(--nn-font-body);
  font-size: var(--nn-caption); color: var(--nn-text-muted);
  line-height: var(--nn-leading-normal);
}
.nn-mono {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-mono); color: var(--nn-text-secondary);
  font-variant-numeric: tabular-nums;
}
.nn-metric {
  font-family: var(--nn-font-mono);
  font-size: var(--nn-metric); font-weight: var(--nn-fw-medium);
  line-height: 1; letter-spacing: -0.01em; color: var(--nn-text-strong);
  font-variant-numeric: tabular-nums;
}

/* Gold rule — the signature divider under eyebrows / section heads */
.nn-rule {
  width: 56px; height: 1.5px; border: 0;
  background: var(--nn-gold); margin: 0;
}

/* ─── RESPONSIVE TYPE ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --nn-display: 3.75rem; --nn-h1: 3rem; --nn-h2: 2.25rem; --nn-h3: 1.625rem;
    --nn-section-y: var(--nn-section-y-tablet);
  }
}
@media (max-width: 640px) {
  :root {
    --nn-display: 2.75rem; --nn-h1: 2.25rem; --nn-h2: 1.875rem; --nn-h3: 1.5rem;
    --nn-lead: 1.1875rem; --nn-body: 1rem; --nn-metric: 2.5rem;
    --nn-section-y: var(--nn-section-y-mobile); --nn-card-pad: 24px;
  }
}

/* ─── UTILITY CLASSES ──────────────────────────────────────────────────── */
.nn-bg-ivory     { background: var(--nn-ivory); }
.nn-bg-alabaster { background: var(--nn-alabaster); }
.nn-bg-paper     { background: var(--nn-paper); }
.nn-bg-stone     { background: var(--nn-stone-100); }
.nn-bg-mist   { background: var(--nn-mist); }
.nn-bg-ink       { background: var(--nn-ink); color: var(--nn-text-inverse); }
.nn-bg-navy    { background: var(--nn-navy); color: var(--nn-text-inverse); }

.nn-text-gold   { color: var(--nn-gold-deep); }
.nn-text-navy  { color: var(--nn-navy); }
.nn-text-muted   { color: var(--nn-text-muted); }
.nn-text-blue{ color: var(--nn-blue); }

.nn-font-display { font-family: var(--nn-font-display); }
.nn-font-body    { font-family: var(--nn-font-body); }
.nn-font-mono    { font-family: var(--nn-font-mono); }

/* Focus visible — gold ring, brand-wide */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--nn-gold);
  outline-offset: 2px;
  box-shadow: var(--nn-shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}