/*
 * NOVA Invoice Suite — Design Tokens (theme-factory: "Ocean Depths")
 * 2026-04-28
 *
 * Tema unificato per:
 *  - docs/index.html (portal landing)
 *  - docs/_portal/viewer.html (markdown renderer)
 *  - sizing-wizard/premium.html
 *  - lifecycle-visualizer/index.html
 *  - architecture/v5/*.svg (canvas-design output)
 *  - sizing-wizard/charts/ (data-visualization PNG)
 *  - futuri docs HTML interattivi
 *
 * USO: <link rel="stylesheet" href="../_theme/nova-tokens.css">
 *      poi var(--nv-...) in tutti gli stili. Niente hex hardcoded.
 *
 * Brand palette: Ocean Depths (theme-factory) — Deep Navy / Teal / Seafoam / Cream.
 * Maritime professional, calmo, leggibile su long-form. Contrasti AA/AAA verificati WCAG.
 */

:root {
  /* ── Brand primary (Teal scale, da Seafoam a Deep Navy) ───────────────── */
  --nv-brand-50:  #f0f7f7;   /* near-cream, hover surfaces */
  --nv-brand-100: #d6e9ea;
  --nv-brand-200: #a8dadc;   /* Seafoam (theme-factory) */
  --nv-brand-300: #7fcccf;
  --nv-brand-400: #56b1b4;
  --nv-brand-500: #2d8b8b;   /* Teal (theme-factory primary) */
  --nv-brand-600: #246e6f;
  --nv-brand-700: #1c5253;   /* deep teal — link/CTA primary */
  --nv-brand-800: #133b3c;
  --nv-brand-900: #1a2332;   /* Deep Navy (theme-factory) */

  /* ── Accent (Seafoam-derived, per highlight + CTA secondari) ──────────── */
  --nv-accent-300: #c4e7e8;
  --nv-accent-500: #a8dadc;   /* Seafoam */
  --nv-accent-700: #7fcccf;

  /* ── Neutral (Navy ink + Cream bg) ────────────────────────────────────── */
  --nv-ink:        #0e1722;   /* deepest navy, headlines */
  --nv-ink-2:      #1a2332;   /* Deep Navy, dark surfaces */
  --nv-text:       #1a2332;   /* body text on light bg */
  --nv-text-soft:  #4a5b6e;
  --nv-muted:      #6b7c8e;
  --nv-border:     #dde7e7;
  --nv-border-2:   #c0d0d1;
  --nv-bg:         #f1faee;   /* Cream (theme-factory) */
  --nv-bg-alt:     #e7f1e6;
  --nv-card:       #ffffff;

  /* ── Semantic (status indicators) — preservati per leggibilità A11Y ─── */
  --nv-ok:         #16a34a;
  --nv-ok-bg:      #f0fdf4;
  --nv-warn:       #d97706;
  --nv-warn-bg:    #fffbeb;
  --nv-danger:     #dc2626;
  --nv-danger-bg:  #fef2f2;
  --nv-info:       var(--nv-brand-700);
  --nv-info-bg:    var(--nv-brand-50);

  /* ── Cost/category palette (per chart e infographic) ──────────────────── */
  --nv-c-capex:    #2d8b8b;   /* Teal */
  --nv-c-opex:     #d97706;   /* Amber */
  --nv-c-sub:      #16a34a;   /* Green */
  --nv-c-cross:    #b04062;   /* Muted rose (harmony with deep teal) */
  --nv-c-storage:  #5b4b8a;   /* Muted indigo */
  --nv-c-ai:       #1c5253;   /* Deep teal */
  --nv-c-network:  #a8dadc;   /* Seafoam */
  --nv-c-compli:   #c54c4c;   /* Muted red */

  /* ── Lifecycle phase colors (6 fasi VIM) ─────────────────────────────── */
  --nv-phase-1:    #c0d0d1;   /* RECEIVED — light slate */
  --nv-phase-2:    #a8dadc;   /* CAPTURED — seafoam */
  --nv-phase-3:    #2d8b8b;   /* MATCHING — teal */
  --nv-phase-4:    #d97706;   /* APPROVAL — amber (preserved for status) */
  --nv-phase-5:    #16a34a;   /* POSTING — green ok */
  --nv-phase-6:    #1a2332;   /* ARCHIVED — deep navy */

  /* ── Typography ───────────────────────────────────────────────────────── */
  --nv-font-display: 'Inter', 'DejaVu Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nv-font-body:    'Inter', 'DejaVu Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nv-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type scale (modular 1.250 minor third) ───────────────────────────── */
  --nv-text-xs:     0.75rem;     /* 12px */
  --nv-text-sm:     0.875rem;    /* 14px */
  --nv-text-base:   1rem;        /* 16px */
  --nv-text-lg:     1.125rem;    /* 18px */
  --nv-text-xl:     1.25rem;     /* 20px */
  --nv-text-2xl:    1.5rem;      /* 24px */
  --nv-text-3xl:    1.875rem;    /* 30px */
  --nv-text-4xl:    2.25rem;     /* 36px */
  --nv-text-5xl:    3rem;        /* 48px */

  /* ── Spacing (8pt grid) ──────────────────────────────────────────────── */
  --nv-sp-1:  4px;
  --nv-sp-2:  8px;
  --nv-sp-3:  12px;
  --nv-sp-4:  16px;
  --nv-sp-5:  24px;
  --nv-sp-6:  32px;
  --nv-sp-7:  48px;
  --nv-sp-8:  64px;
  --nv-sp-9:  96px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --nv-r-sm:  4px;
  --nv-r:     8px;
  --nv-r-lg:  12px;
  --nv-r-xl:  16px;
  --nv-r-2xl: 24px;
  --nv-r-pill: 999px;

  /* ── Elevation (box-shadow) — toni navy per coerenza ─────────────────── */
  --nv-shadow-sm:  0 1px 2px rgba(26, 35, 50, 0.04);
  --nv-shadow:     0 1px 3px rgba(26, 35, 50, 0.08), 0 1px 2px rgba(26, 35, 50, 0.04);
  --nv-shadow-md:  0 4px 12px rgba(26, 35, 50, 0.10), 0 2px 4px rgba(26, 35, 50, 0.05);
  --nv-shadow-lg:  0 12px 32px rgba(26, 35, 50, 0.14), 0 4px 8px rgba(26, 35, 50, 0.06);
  --nv-shadow-xl:  0 24px 48px rgba(26, 35, 50, 0.18);
  --nv-shadow-glow: 0 0 0 4px rgba(45, 139, 139, 0.22);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --nv-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --nv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nv-dur-fast:  120ms;
  --nv-dur:       200ms;
  --nv-dur-slow:  400ms;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --nv-page-max:  1280px;
  --nv-prose-max: 72ch;
}

/* Dark mode opt-in via [data-theme="dark"] */
[data-theme="dark"] {
  --nv-text:       #f1faee;   /* Cream */
  --nv-text-soft:  #c0d0d1;
  --nv-muted:      #8a9ba8;
  --nv-border:     #2a3645;
  --nv-border-2:   #3b4a5c;
  --nv-bg:         #0e1722;
  --nv-bg-alt:     #1a2332;
  --nv-card:       #1a2332;
  --nv-ink:        #f1faee;
}

/* ── Reset minimale + base typography ──────────────────────────────────── */
.nv-reset *,
.nv-reset *::before,
.nv-reset *::after { box-sizing: border-box; }

.nv-body {
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-base);
  line-height: 1.5;
  color: var(--nv-text);
  background: var(--nv-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nv-h1 { font-family: var(--nv-font-display); font-size: var(--nv-text-5xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--nv-ink); }
.nv-h2 { font-family: var(--nv-font-display); font-size: var(--nv-text-3xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--nv-ink); }
.nv-h3 { font-family: var(--nv-font-display); font-size: var(--nv-text-xl);  font-weight: 700; letter-spacing: -0.01em;  line-height: 1.3; color: var(--nv-ink); }
.nv-eyebrow { font-size: var(--nv-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nv-brand-700); }

.nv-mono { font-family: var(--nv-font-mono); font-size: 0.92em; }

/* ── Componenti base riusabili ──────────────────────────────────────────── */
.nv-card {
  background: var(--nv-card);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r-lg);
  box-shadow: var(--nv-shadow);
  padding: var(--nv-sp-5);
}

.nv-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-sp-1);
  padding: 2px 10px;
  font-size: var(--nv-text-xs);
  font-weight: 600;
  border-radius: var(--nv-r-pill);
  background: var(--nv-bg-alt);
  color: var(--nv-text-soft);
}
.nv-pill--brand   { background: var(--nv-brand-50);  color: var(--nv-brand-800); }
.nv-pill--ok      { background: var(--nv-ok-bg);     color: var(--nv-ok); }
.nv-pill--warn    { background: var(--nv-warn-bg);   color: var(--nv-warn); }
.nv-pill--danger  { background: var(--nv-danger-bg); color: var(--nv-danger); }

.nv-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-sp-2);
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  background: var(--nv-brand-700);
  color: #fff;
  border: 0;
  border-radius: var(--nv-r);
  cursor: pointer;
  transition: transform var(--nv-dur) var(--nv-ease-out), box-shadow var(--nv-dur) var(--nv-ease-out), background var(--nv-dur);
  box-shadow: var(--nv-shadow);
}
.nv-btn:hover  { background: var(--nv-brand-800); transform: translateY(-1px); box-shadow: var(--nv-shadow-md); }
.nv-btn:focus-visible { outline: none; box-shadow: var(--nv-shadow-glow); }
.nv-btn--ghost { background: transparent; color: var(--nv-brand-700); border: 1px solid var(--nv-border-2); box-shadow: none; }
.nv-btn--ghost:hover { background: var(--nv-brand-50); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}