/* ==========================================================================
   NADIA PALACIOS, DESIGN TOKENS
   Colors sampled from _briefs/refs/homepage.jpg.
   ========================================================================== */

:root {

  /* ── COLOR ─────────────────────────────────────────────────
     blush     : dominant warm background  (sampled #F9ECE4)
     ink       : warm-umber display + body text (sampled darkest #52483C)
     ink-deep  : stronger text / UI where more contrast is needed
     olive     : featured-project panel  (brief #4A452F, sample range #3A3424–#524B3B)
     olive-deep: panel shadow / inset edge
  */
  --np-blush:        #F9ECE4;
  --np-blush-tint:   #FDF6F0;   /* lighter wash for stacked panels */
  --np-ink:          #52483C;
  --np-ink-deep:     #3A322A;
  --np-olive:        #4A452F;
  --np-olive-deep:   #3A3424;
  --np-white:        #FFFFFF;
  --np-brown: #524b3b;
  --np-pink: #eeaea2;
  --np-purple:#401521;

  /* Semantic aliases */
  --np-bg:           var(--np-blush);
  --np-text:         var(--np-ink);
  --np-text-strong:  var(--np-ink-deep);
  --np-text-on-dark: #EDE6DC;              /* text over olive / hero scrim */
  --np-text-muted:   color-mix(in srgb, var(--np-ink) 45%, var(--np-blush));
  --np-panel:        var(--np-olive);
  --np-border:       color-mix(in srgb, var(--np-ink) 18%, transparent);

  /* Hero scrim, subtle top gradient for header legibility */
  --np-hero-scrim:   linear-gradient(to bottom, rgba(30,24,18,0.28), rgba(30,24,18,0) 38%);

  /* ── TYPOGRAPHY ────────────────────────────────────────────
     forevs     : large display serif statements (Typekit)
     elza-text  : body copy (Typekit)
     legitima   : italic serif micro-labels (Typekit, italic 500 only)
     Campton    : small-caps UI labels, nav, buttons (local)
  */
  --np-font-display: 'forevs', 'Times New Roman', serif;
  --np-font-body:    'elza-text', system-ui, -apple-system, sans-serif;
  --np-font-italic:  'legitima', Georgia, serif;   /* real italic face; no faux slant */
  --np-font-label:   'Campton', system-ui, sans-serif;
  --np-font-campton: var(--np-font-label);

  /* Fluid display scale for the all-caps statements */
  --np-fs-statement: clamp(2.75rem, 7vw, 7rem);
  --np-fs-eyebrow:   clamp(0.7rem, 0.75vw, 0.8rem);
  --np-fs-body:      16px;
	--np-fs-18: 18px;
  --np-fs-label:     var(--np-fs-18);
  
  --np-fs-24:  24px;
  --np-fs-30:  var(--np-fs-24);
  --np-fs-55:  55px;
	--np-fs-statement: var(--np-fs-55);
  --np-fs-16: 16px;
	--np-fs-15: 15px;
  --np-fs-22: 22px;
	--np-fs-12: 12px;

  --np-lh-display:   1.02;
  --np-lh-body:      1.5;
  --np-tracking-label: 0.1em;   /* small-caps letter-spacing */

  /* ── LAYOUT / SPACING ──────────────────────────────────────*/
  --np-gutter:       clamp(1.25rem, 5vw, 6rem);   /* content side padding */
  --np-gutter: 56px;
  --np-maxw:         1600px;                       /* outer content cap */
  --np-maxw:none; /*not needed*/
  --np-section-y:    clamp(4rem, 10vw, 11rem);     /* vertical section rhythm */
	--np-section-y:7em;

  /* ── MOTION ────────────────────────────────────────────────*/
  --np-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --np-dur:          0.6s;

  --np-z-header:     100;
  --np-z-overlay:    200;
  --np-z-gallery:    90;    /* project lightbox: below the header (100), above page flow */
}
@media(max-width:980px){
:root{
--np-fs-statement: clamp(2.75rem, 7vw, 7rem);
  --np-fs-eyebrow:   clamp(0.7rem, 0.75vw, 0.8rem);
  --np-fs-body:      10px;
	--np-fs-18: 12px;
  --np-fs-label:     12px;
  --np-fs-statement: 36px;
  --np-fs-24:  14px;
  --np-fs-30:  20px;
  --np-fs-55:  25px;
  --np-fs-16: 11px;
  --np-fs-22: 16px;
	--np-fs-15:10px;
  
  --np-gutter: 25px;
  --np-section-y:3em;
	--np-fs-12: 9px;
}   
}