/* =========================================================
   Peptós.LIFE, Colors & Type
   The single source of truth for visual tokens.
   Import once at the top of any HTML file:
     <link rel="stylesheet" href="colors_and_type.css">

   Register: premium · longevity · lifeforce · cinematic.
   Cosmic void background with electric ice-blue glow.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* =========================================================
     BRAND COLOR, cosmic horizon palette
     Sampled directly from the NAM logo. The system reads as
     starlight-on-void: near-black navy, lifted by ice-blue glow.
     ========================================================= */

  /* Void / cosmos */
  --n-void:           #01091D;   /* deepest, true brand background */
  --n-cosmos:         #050E25;   /* one stop up, large panels */
  --n-nebula:         #0A1838;   /* card on dark, elevated surface */
  --n-horizon:        #122448;   /* hover on dark, dividers */
  --n-rim:            #1E3460;   /* high-contrast border on void */

  /* Glow, the electric ice-blue thread that runs the brand */
  --n-glow-100:       #DCEEFF;   /* highest highlight, text on hero */
  --n-glow-200:       #B6D8FF;   /* eyebrow on dark, subtle accents */
  --n-glow-300:       #6BA5FF;   /* CTA hover, focus rings */
  --n-glow-400:       #2E72FF;   /* primary accent, electric pop */
  --n-glow-500:       #1E55D8;   /* pressed state */
  --n-glow-600:       #1543B0;   /* deep accent on light */

  /* Light surface palette (used sparingly, system is dark-first now) */
  --n-mist:           #F4F6FB;   /* page bg on light */
  --n-cloud:          #FFFFFF;   /* card bg on light */
  --n-stone-1:        #2A3148;   /* primary text on light */
  --n-stone-2:        #4B5470;   /* secondary text on light */
  --n-stone-3:        #7A819A;   /* muted text on light */
  --n-border:         #DBE2EE;   /* hairline on light */
  --n-border-strong:  #BCC5D8;

  /* =========================================================
     SEMANTIC, dark-first
     Default surface is cosmic void; light surfaces are accents.
     ========================================================= */

  /* Dark (default) */
  --bg-dark:           var(--n-void);
  --bg-dark-elev:      var(--n-cosmos);
  --bg-dark-card:      var(--n-nebula);
  --fg-on-dark-1:      var(--n-glow-100);   /* primary text on void */
  --fg-on-dark-2:      #B7C5DD;             /* secondary */
  --fg-on-dark-3:      #7A8AAA;             /* muted */
  --border-on-dark:        rgba(255,255,255,0.10);
  --border-on-dark-strong: rgba(127,183,255,0.32);  /* glow-tinted */

  /* Light (when needed, long-form, dashboards) */
  --bg:                var(--n-mist);
  --bg-elevated:       var(--n-cloud);
  --fg-1:              var(--n-stone-1);
  --fg-2:              var(--n-stone-2);
  --fg-3:              var(--n-stone-3);
  --fg-on-accent:      #FFFFFF;
  --border:            var(--n-border);
  --border-strong:     var(--n-border-strong);

  /* Accent, same on both surfaces */
  --accent:            var(--n-glow-400);
  --accent-hover:      var(--n-glow-300);
  --accent-pressed:    var(--n-glow-500);
  --accent-soft:       rgba(79,149,242,0.12);

  /* =========================================================
     STATUS, clinical signal still present, but cosmic-tuned.
     ========================================================= */
  --status-success:    #4FB58A;             /* a brighter, more vital green */
  --status-warning:    #D4A24A;
  --status-danger:     #E26A6A;
  --status-info:       var(--accent);

  /* =========================================================
     GOLD, the second accent (brand metal, from the Peptós.LIFE mark).
     Blue glow remains the primary signal; gold is the warm premium
     detail: rules, the wordmark Ó, trust marks, gilt hairlines.
     ========================================================= */
  --gold-100:          #F6E7BE;
  --gold-200:          #EBD292;
  --gold-300:          #DDB85F;   /* primary gold accent */
  --gold-400:          #C99B3A;
  --gold-500:          #A67A2A;
  --gold:              var(--gold-300);
  --gold-rgb:          221,184,95;
  --gold-soft:         rgba(221,184,95,0.12);
  --gold-glow-sm:      0 0 12px rgba(221,184,95,0.42);
  --gold-glow-md:      0 0 26px rgba(221,184,95,0.50), 0 0 64px rgba(221,184,95,0.22);
  --gold-line:         linear-gradient(90deg, rgba(221,184,95,0), rgba(221,184,95,0.85) 50%, rgba(221,184,95,0));

  /* Regulatory states (FDA Peptide Tracker, three states only) */
  --status-legal:      #4FB58A;             /* vital green, lifeforce-feel */
  --status-pcac:       var(--accent);       /* ice blue, under review */
  --status-not-legal:  #E26A6A;             /* warm rose, voted down */
  --status-pending:    var(--status-pcac);
  --status-notlegal:   var(--status-not-legal);

  /* =========================================================
     LEGACY ALIASES, old Xgevity token names continue to resolve
     so existing files keep rendering during the pivot.
     ========================================================= */
  --x-navy-deep:       var(--n-void);
  --x-navy:            var(--n-cosmos);
  --x-slate:           var(--n-nebula);
  --x-slate-2:         var(--n-horizon);
  --x-blue-peptide:    var(--accent);
  --x-blue-soft:       var(--n-glow-300);
  --x-cool-gray:       var(--fg-on-dark-3);
  --x-light:           var(--bg);
  --x-white:           #FFFFFF;
  --x-teal-deep:       var(--accent);    /* deprecated, no more teal */

  /* =========================================================
     TYPE
     Headings: Montserrat 300–700 (we now use 300/400 for hero, 
       the new register is light + airy, not bold + clinical).
     Body:     Inter 300–600.
     Mono:     system stack.
     ========================================================= */
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Sizing */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  --lh-tight:    1.02;
  --lh-snug:     1.15;
  --lh-normal:   1.45;
  --lh-relaxed:  1.65;

  /* Tracking, NAM leans WIDER than Xgevity ever did.
     Wordmark + section labels routinely run 0.24–0.4em. */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.18em;
  --tracking-widest:  0.32em;   /* PEPTÓS.LIFE tagline */
  --tracking-logo:    0.42em;   /* N · A · M wordmark when set in type */

  /* =========================================================
     SPACING, 4px base
     ========================================================= */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  36px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;
  --sp-48: 192px;

  /* =========================================================
     RADII, restrained. Premium reads less rounded.
     ========================================================= */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* =========================================================
     GLOW & SHADOW
     NAM replaces drop-shadows with luminous halos. On dark
     surfaces, depth is built with glow, not shadow.
     ========================================================= */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.32);
  --shadow-3: 0 16px 40px rgba(0,0,0,0.42);
  --shadow-4: 0 32px 80px rgba(0,0,0,0.55);

  /* Glow halos, punchier, more electric. Used as the brand's depth on dark. */
  --glow-sm: 0 0 12px rgba(46,114,255,0.40);
  --glow-md: 0 0 28px rgba(46,114,255,0.50), 0 0 72px rgba(46,114,255,0.22);
  --glow-lg: 0 0 48px rgba(46,114,255,0.62), 0 0 140px rgba(46,114,255,0.28);
  --glow-rim: 0 0 0 1px rgba(107,165,255,0.55);

  /* Horizon, signature glowing arc under hero copy. */
  --horizon: linear-gradient(180deg,
    transparent 0%,
    rgba(107,165,255,0) 60%,
    rgba(107,165,255,0.65) 78%,
    rgba(220,238,255,0.95) 80%,
    rgba(107,165,255,0.65) 82%,
    rgba(107,165,255,0) 100%
  );

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   520ms;
  --dur-cinema: 1200ms;   /* slow reveals on hero entries */
}

/* =========================================================
   Element-level semantic styles
   Dark is the default; pages opt in to light via class="surface-light".
   ========================================================= */

html, body {
  background: var(--bg-dark);
  color: var(--fg-on-dark-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.surface-light, .surface-light {
  background: var(--bg);
  color: var(--fg-1);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--font-heading);
  color: inherit;
  margin: 0;
  text-wrap: balance;
}

/* NAM headlines are LIGHTER than the old Xgevity ones.
   300 / 400 for display, 500 / 600 for utility. */
.h1, h1 { font-size: var(--fs-64); font-weight: 300; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.h2, h2 { font-size: var(--fs-48); font-weight: 300; line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); }
.h3, h3 { font-size: var(--fs-32); font-weight: 400; line-height: var(--lh-snug);  letter-spacing: -0.01em; }
.h4, h4 { font-size: var(--fs-24); font-weight: 500; line-height: var(--lh-snug); }
.h5, h5 { font-size: var(--fs-20); font-weight: 500; line-height: var(--lh-snug); }
.h6, h6 { font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-normal); }

.display-xl { font-family: var(--font-heading); font-weight: 200; font-size: clamp(56px, 8vw, 96px); line-height: 1; letter-spacing: var(--tracking-tight); }
.display-lg { font-family: var(--font-heading); font-weight: 300; font-size: clamp(44px, 6vw, 72px); line-height: 1.05; letter-spacing: var(--tracking-tight); }

/* Eyebrow, wide-tracked all-caps. */
.eyebrow {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--n-glow-200);
}
.eyebrow.on-light { color: var(--fg-3); }

/* Body */
p, .body { font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg-on-dark-2); font-weight: 300; }
.surface-light p, .surface-light .body { color: var(--fg-2); }
.body-lg { font-size: var(--fs-18); line-height: var(--lh-relaxed); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-normal); }
.caption  { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg-on-dark-3); letter-spacing: var(--tracking-wide); }
.surface-light .caption { color: var(--fg-3); }

/* Tagline, wide tracked, always-caps, the brand's signature voice mark. */
.tagline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--n-glow-200);
}
.surface-light .tagline { color: var(--fg-2); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: 0.01em;
}

/* Hairline divider */
.rule { height: 1px; background: var(--border-on-dark); border: 0; }
.surface-light .rule { background: var(--border); }
.rule.short {
  width: 56px; height: 1px; background: var(--accent); border: 0;
  box-shadow: var(--glow-sm);
}

/* Horizon arc, drop into any section as <div class="horizon"></div> */
.horizon {
  height: 2px;
  width: 100%;
  background: var(--horizon);
  filter: blur(0.5px);
}

/* Glow utility, apply to type/elements you want lit. */
.glow      { text-shadow: 0 0 14px rgba(46,114,255,0.42), 0 0 36px rgba(46,114,255,0.22); }
.glow-soft { text-shadow: 0 0 18px rgba(107,165,255,0.28); }

/* Headline pop, for hero clauses that should read as electric. */
.glow-pop {
  color: var(--n-glow-300);
  text-shadow: 0 0 18px rgba(46,114,255,0.55), 0 0 48px rgba(46,114,255,0.28);
}

/* Gold accents, the warm second signal. Use sparingly: premium punctuation. */
.text-gold { color: var(--gold); }
.glow-gold { text-shadow: 0 0 14px rgba(221,184,95,0.45), 0 0 36px rgba(221,184,95,0.22); }
.rule.short.rule--gold { background: var(--gold); box-shadow: var(--gold-glow-sm); }
.rule.gilt { height: 1px; background: var(--gold-line); }