/* ============================================================
   NEXA · Design Tokens
   Sustainability Report — Web Edition
   v0.2 · 2026-05-15 · aligned to official Manual de Normas

   ── DUAL PALETTE ───────────────────────────────────────────
   1. BRAND palette  (--nx-brand-*) ← OFFICIAL · Manual de Normas
      Use for: logo, watermarks, official documents, signatures.
      DO NOT alter, soften, or tint these.

   2. EDITORIAL palette (--nx-ink, --nx-bone, etc.) ← extends
      brand for long-form editorial / RS publication.
      The printed Relatório uses these; the web inherits them.
      Accent (orange/peach) is identical to the brand.
   ────────────────────────────────────────────────────────── */

:root {
  /* ===== 1. OFFICIAL BRAND PALETTE (Pantone-certified) ===== */
  --nx-brand-ink:    #03020C;   /* Pantone Black 6 C · the institutional black */
  --nx-brand-orange: #C85204;   /* Pantone 2020 C · accent — UNTOUCHABLE */
  --nx-brand-white:  #FFFFFF;   /* Pantone 663 C · pure white */
  --nx-brand-peach:  #EDCCC0;   /* Pantone 2309 C · intermediate tone */

  /* ===== 2. EDITORIAL PALETTE (RS Web Edition) ===== */
  /* Dark family — warm interpretation of #03020C for editorial surfaces */
  --nx-ink:          #2D2D2C;   /* warm grey · dominant dark surface */
  --nx-ink-2:        #3A3A38;   /* one step lighter — patterns on ink */
  --nx-ink-3:        #4A4A48;   /* hairlines on dark, subtle bars */

  /* Accent — IDENTICAL TO BRAND. Editorial does not soften the orange. */
  --nx-orange:       #C85204;   /* === brand · single accent throughout */
  --nx-orange-deep:  #A8420A;   /* hover/pressed/shadow */
  --nx-orange-soft:  #EDCCC0;   /* === brand peach · chart fills, secondary accents */

  /* Warm neutrals — editorial extension (not in brand manual) */
  --nx-bone:         #EDEAE3;   /* dominant page bg for data/content */
  --nx-paper:        #F5F2EB;   /* lighter cream — cards, secondary */
  --nx-mist:         #E3DFD6;   /* tertiary cream — dividers, row stripes */
  --nx-mid:          #9A9794;   /* mid-grey · captions, axes, metadata */
  --nx-line:         #D6D1C7;   /* hairlines on bone */
  --nx-line-dark:    #4A4A48;   /* hairlines on ink */

  /* ===== Semantic shortcuts (rare use) ===== */
  --nx-on-ink:       #EDEAE3;
  --nx-on-orange:    #FFFFFF;   /* white on orange · brand-compliant */
  --nx-on-bone:      #2D2D2C;
  --nx-mute-on-ink:  #9A9794;
  --nx-mute-on-bone: #6C6964;

  /* ============ TYPOGRAPHY · Montserrat (Manual de Normas) ============ */
  /* "A tipografia Montserrat foi escolhida pela sua modernidade,
      estética profissional e por garantir uma fácil leitura.
      Além disso, é uma fonte open source." — KIT DE NORMAS, p.16 */
  --nx-font-sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --nx-font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --nx-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============ TYPE SCALE (modular, base 16) ============ */
  --nx-size-3xs:     0.6875rem;   /* 11px — footer nav, ultra-meta */
  --nx-size-2xs:     0.75rem;     /* 12px — caption */
  --nx-size-xs:      0.8125rem;   /* 13px — small UI */
  --nx-size-sm:      0.9375rem;   /* 15px — body small */
  --nx-size-md:      1.0625rem;   /* 17px — body */
  --nx-size-lg:      1.25rem;     /* 20px — lead paragraph */
  --nx-size-xl:      1.625rem;    /* 26px — h3 */
  --nx-size-2xl:     2.25rem;     /* 36px — h2 */
  --nx-size-3xl:     3.25rem;     /* 52px — h1 / section opener */
  --nx-size-4xl:     5rem;        /* 80px — display */
  --nx-size-5xl:     7.5rem;      /* 120px — hero display */
  --nx-size-6xl:     11rem;       /* 176px — page hero numerals */

  /* ============ WEIGHT / TRACKING ============ */
  --nx-w-thin:       100;
  --nx-w-extralight: 200;
  --nx-w-light:      300;
  --nx-w-regular:    400;
  --nx-w-medium:     500;
  --nx-w-semibold:   600;
  --nx-w-bold:       700;
  --nx-w-extrabold:  800;
  --nx-w-black:      900;

  --nx-track-tight:  -0.02em;
  --nx-track-normal: 0;
  --nx-track-loose:  0.04em;
  --nx-track-caps:   0.14em;
  --nx-leading-tight: 1.04;
  --nx-leading-snug:  1.18;
  --nx-leading-body:  1.55;

  /* ============ SPACING ============ */
  --nx-s-1:   4px;
  --nx-s-2:   8px;
  --nx-s-3:   12px;
  --nx-s-4:   16px;
  --nx-s-5:   24px;
  --nx-s-6:   32px;
  --nx-s-7:   48px;
  --nx-s-8:   64px;
  --nx-s-9:   96px;
  --nx-s-10:  128px;
  --nx-s-11:  192px;

  /* ============ LAYOUT ============ */
  --nx-page-max:   1440px;
  --nx-page-pad:   clamp(24px, 4vw, 72px);
  --nx-col-gap:    clamp(16px, 2vw, 32px);

  /* ============ RADIUS ============ */
  --nx-r-0:    0;
  --nx-r-sm:   4px;
  --nx-r-md:   10px;
  --nx-r-lg:   16px;
  --nx-r-pill: 999px;

  /* ============ MOTION ============ */
  --nx-dur-quick: 180ms;
  --nx-dur-base:  360ms;
  --nx-dur-slow:  720ms;
  --nx-dur-epic:  1400ms;
  --nx-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --nx-ease-in:     cubic-bezier(0.32, 0, 0.67, 0);
  --nx-ease-arch:   cubic-bezier(0.7, 0, 0.2, 1);
  --nx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============ SHADOW (very rare) ============ */
  --nx-shadow-card: 0 1px 0 rgba(3, 2, 12, 0.04), 0 12px 32px -16px rgba(3, 2, 12, 0.12);

  /* ============ LOGO ICON · SEGMENTED X GEOMETRY ============ */
  /* The official X is FOUR strokes with a center gap (nexus metaphor).
     Stroke = 8% of icon size · Gap = 14% center exclusion zone.
     Use --nx-x-gap to scale the central void. */
  --nx-x-stroke: 0.08;       /* fraction of viewBox */
  --nx-x-gap:    0.16;       /* fraction of viewBox · center exclusion */
}

/* Reduced motion respect — never as global off-switch. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nx-dur-quick: 0ms;
    --nx-dur-base:  0ms;
    --nx-dur-slow:  0ms;
    --nx-dur-epic:  0ms;
  }
}