/* ============================================================
   NR — Color tokens
   Sourced from the official Nanini & Ragazzi visual identity:
   #05161b · #1f333a · #6e4725 · #936a43 · #caccc4 · #ffffff
   ============================================================ */

:root {
  /* ---- Brand palette (base) ---- */
  --nr-ink:        #05161b;  /* deepest petrol-black — hero grounds, headings on light */
  --nr-petrol:     #1f333a;  /* signature dark teal — primary brand surface */
  --nr-tobacco:    #6e4725;  /* deep tobacco brown — copper shadow / deep accent */
  --nr-copper:     #936a43;  /* primary accent — the bronze monogram */
  --nr-sage:       #caccc4;  /* muted sage grey — quiet neutral */
  --nr-white:      #ffffff;

  /* ---- Petrol / teal scale ---- */
  --nr-petrol-950: #05161b;
  --nr-petrol-900: #0a2027;
  --nr-petrol-800: #16292f;
  --nr-petrol-700: #1f333a;
  --nr-petrol-600: #2a434c;
  --nr-petrol-500: #38545f;

  /* ---- Copper / bronze scale (the metallic monogram) ---- */
  --nr-copper-800: #5c3a1d;
  --nr-copper-700: #6e4725;
  --nr-copper-600: #835a35;
  --nr-copper-500: #936a43;
  --nr-copper-400: #ab8259;
  --nr-copper-300: #c2966a;  /* light copper / highlight */
  --nr-copper-200: #dcb98c;  /* lightest metallic highlight */

  /* ---- Warm neutrals ---- */
  --nr-paper:      #f7f5f1;  /* warm off-white — primary light surface */
  --nr-paper-2:    #efece5;  /* warm card / inset on light */
  --nr-sage-200:   #e4e5e0;  /* pale sage line / hairline on light */
  --nr-sage-300:   #caccc4;
  --nr-sage-500:   #9a9d93;  /* sage text — captions on light */

  /* ---- Signature gradients ---- */
  --nr-gradient-copper: linear-gradient(135deg, #6e4725 0%, #936a43 42%, #c2966a 74%, #dcb98c 100%); /* @kind color */
  --nr-gradient-ink:    linear-gradient(160deg, #11313c 0%, #0a2027 55%, #05161b 100%); /* @kind color */
  --nr-gradient-hairline: linear-gradient(90deg, #936a43 0%, rgba(147,106,67,0) 100%); /* @kind color */

  /* ---- Status (kept warm & restrained to suit a legal brand) ---- */
  --nr-success: #5e7d5a;
  --nr-warning: #b5832f;
  --nr-danger:  #9c4a3a;
  --nr-info:    #38545f;

  /* ============================================================
     SEMANTIC ALIASES — default = LIGHT surface (paper)
     ============================================================ */
  --surface-base:    var(--nr-paper);
  --surface-raised:  var(--nr-white);
  --surface-inset:   var(--nr-paper-2);
  --surface-invert:  var(--nr-petrol-700);

  --text-primary:    var(--nr-ink);
  --text-secondary:  #3f5158;
  --text-muted:      var(--nr-sage-500);
  --text-on-accent:  var(--nr-white);
  --text-on-dark:    #f3f1ea;

  --accent:          var(--nr-copper-500);
  --accent-strong:   var(--nr-copper-700);
  --accent-soft:     rgba(147,106,67,0.10);
  --accent-on:       var(--nr-white);

  --border:          var(--nr-sage-200);
  --border-strong:   #d3d0c7;
  --hairline:        rgba(31,51,58,0.10);
  --focus-ring:      rgba(147,106,67,0.45);

  --link:            var(--nr-copper-700);
  --link-hover:      var(--nr-copper-500);
}

/* ============================================================
   DARK scope — the signature petrol+copper context
   (business cards, hero panels, premium sections)
   Apply with class .nr-dark on any container.
   ============================================================ */
.nr-dark {
  --surface-base:   var(--nr-ink);
  --surface-raised: var(--nr-petrol-700);
  --surface-inset:  var(--nr-petrol-800);
  --surface-invert: var(--nr-paper);

  --text-primary:   #f3f1ea;
  --text-secondary: rgba(243,241,234,0.72);
  --text-muted:     rgba(243,241,234,0.50);
  --text-on-accent: var(--nr-ink);
  --text-on-dark:   #f3f1ea;

  --accent:         var(--nr-copper-300);
  --accent-strong:  var(--nr-copper-200);
  --accent-soft:    rgba(194,150,106,0.14);
  --accent-on:      var(--nr-ink);

  --border:         rgba(202,204,196,0.16);
  --border-strong:  rgba(202,204,196,0.30);
  --hairline:       rgba(202,204,196,0.12);
  --focus-ring:     rgba(194,150,106,0.55);

  --link:           var(--nr-copper-300);
  --link-hover:     var(--nr-copper-200);

  background-color: var(--surface-base);
  color: var(--text-primary);
}