/* ==========================================================================
   N|HOLANDA — Colors & Type Foundation
   Paleta: preto · branco · grafite · dourado
   Tom: institucional, arquitetônico, sofisticado, sólido
   ========================================================================== */

/* ---- Fonts (Google Fonts substitutes — see README "Fonts" caveat) -------- */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Manrope:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ===================== BASE COLOR TOKENS ===================== */

  /* Ink / black — taken from the logo's soft black (#231F20) + deep variants */
  --black:        #0E0E0F;   /* true black, deep backgrounds */
  --ink:          #1B1A19;   /* brand ink — logo black, primary text */
  --graphite:     #3A3A3C;   /* grafite — secondary surfaces & text */
  --graphite-2:   #57565A;   /* muted graphite, captions */

  /* Gold — dourado */
  --gold:         #C9A24B;   /* primary gold */
  --gold-bright:  #DBBE7C;   /* highlight / hover gold */
  --gold-deep:    #A07E33;   /* pressed / on-light gold */
  --gold-foil:    #E7D29A;   /* soft foil tint for large fills */

  /* Neutrals — branco + papel */
  --white:        #FFFFFF;
  --bone:         #F6F4EF;   /* warm off-white "paper" */
  --bone-2:       #ECE8E0;   /* slightly deeper paper */
  --line:         #DAD6CD;   /* hairline borders on light */
  --line-strong:  #C4BFB4;   /* stronger divider on light */
  --line-dark:    #34333A;   /* hairline borders on dark */

  /* ===================== SEMANTIC COLOR TOKENS ===================== */
  --bg:           var(--white);
  --bg-paper:     var(--bone);
  --bg-ink:       var(--ink);
  --bg-black:     var(--black);

  --fg1:          var(--ink);        /* primary text on light */
  --fg2:          var(--graphite);   /* secondary text on light */
  --fg3:          var(--graphite-2); /* tertiary / captions */
  --fg-on-dark:   #F3F1EC;           /* primary text on dark */
  --fg2-on-dark:  #B8B5AD;           /* secondary text on dark */

  --accent:       var(--gold);
  --accent-hover: var(--gold-bright);
  --accent-press: var(--gold-deep);
  --on-accent:    var(--ink);        /* text sitting on gold */

  --border:       var(--line);
  --border-dark:  var(--line-dark);

  /* ===================== TYPE FAMILIES ===================== */
  --font-display: 'Jost', system-ui, sans-serif;          /* wide tracked uppercase, echoes wordmark */
  --font-body:    'Manrope', system-ui, sans-serif;       /* workhorse UI + body */
  --font-serif:   'Cormorant Garamond', Georgia, serif;   /* editorial accent, echoes monogram N */

  /* ===================== TYPE SCALE ===================== */
  --step--1: 0.833rem;   /* 13.3px - fine print */
  --step-0:  1rem;       /* 16px  - body */
  --step-1:  1.25rem;    /* 20px  - lead */
  --step-2:  1.728rem;   /* 27.6px - h4 */
  --step-3:  2.488rem;   /* 39.8px - h3 */
  --step-4:  3.583rem;   /* 57.3px - h2 */
  --step-5:  5.16rem;    /* 82.6px - h1 / display */

  /* tracking */
  --track-display: 0.18em;  /* wide spacing for uppercase labels/wordmark */
  --track-eyebrow: 0.32em;
  --track-tight:   -0.01em;

  /* ===================== SPACING (8pt-based) ===================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ===================== RADII ===================== */
  /* Brand favors straight lines & solid shapes — radii are minimal */
  --radius-0: 0px;     /* default: sharp corners */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* ===================== SHADOWS / ELEVATION ===================== */
  /* Restrained, architectural. Shadows are subtle; structure comes from lines. */
  --shadow-1: 0 1px 2px rgba(27,26,25,0.06);
  --shadow-2: 0 4px 16px rgba(27,26,25,0.08);
  --shadow-3: 0 18px 48px rgba(27,26,25,0.14);
  --shadow-gold: 0 8px 28px rgba(160,126,51,0.22);
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================== */
.nh-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-deep);
}

.nh-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--fg1);
}

.nh-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg1);
}

.nh-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--fg1);
}

.nh-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.25;
  color: var(--fg1);
}

.nh-lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg2);
}

.nh-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--fg2);
}

.nh-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--fg3);
}

.nh-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.3;
  color: var(--fg1);
}