/* =============================================================================
   NGD MARKETPLACE — DESIGN TOKENS  (single source of truth / controlled config)
   -----------------------------------------------------------------------------
   Part 2 deliverable. ISOLATED / NON-PRODUCTION reference.
   This file is NOT yet linked into any production portal. Portal rollout = Part 4.

   HOW TO REBRAND (one place):
     • Change --ngd-brand-primary / --ngd-brand-navy below to the official NGD colors.
     • Replace the placeholder wordmark asset (see --ngd-logo-* + /docs/design/prototype).
     • Everything else (components, states, portals) inherits from these tokens.

   NOTE: the current --ngd-brand-* values are a PLACEHOLDER premium-blue identity,
   chosen to match the approved visual direction. Swap when official brand is provided.
   ============================================================================= */

:root {
  /* ---- BRAND (swap these for official NGD brand) ------------------------- */
  --ngd-brand-primary: #0A7266; /* [ui-fix] was #0bb5a6 (white text ~2.57:1, teal-text-on-white ~2.46:1 — both fail AA); #0A7266 = 5.81:1 white / 5.6:1 text. Decorative brand teal stays in theme-color meta + logo. */
  --ngd-brand-primary-hover: #08594F;
  --ngd-brand-primary-active: #064A41;
  --ngd-brand-navy: #0b1220;
  --ngd-brand-navy-hover: #172236;
  --ngd-brand-on-primary: #ffffff;
  --ngd-brand-tint: #e6f7f5;
  --ngd-brand-ring: rgba(11, 181, 166, 0.32);

  /* ---- NEUTRAL SURFACES ------------------------------------------------- */
  --ngd-bg: #ffffff;              /* primary background */
  --ngd-bg-subtle: #f5f7fa;       /* secondary background (light blue-gray) */
  --ngd-bg-muted: #eef1f6;        /* zebra rows, disabled fields */
  --ngd-surface: #ffffff;         /* cards, panels */
  --ngd-surface-raised: #ffffff;  /* modals, popovers (uses shadow for lift) */
  --ngd-overlay: rgba(15, 23, 42, 0.48); /* modal backdrop */

  /* ---- TEXT ------------------------------------------------------------- */
  --ngd-text: #1a1f2b;            /* main / dark charcoal */
  --ngd-text-secondary: #5b6472;  /* muted gray */
  --ngd-text-tertiary: #667085;   /* [audit-fix] hints/placeholders — was #8a94a6 (~2.9:1, fails WCAG AA); #667085 ~4.6:1 */
  --ngd-text-inverse: #ffffff;
  --ngd-text-link: var(--ngd-brand-primary);

  /* ---- BORDERS / DIVIDERS ---------------------------------------------- */
  --ngd-border: #dfe3ea;          /* soft neutral gray */
  --ngd-border-strong: #c6ccd8;
  --ngd-border-focus: var(--ngd-brand-primary);

  /* ---- SEMANTIC STATUS (never color-only; pair with icon + label) ------- */
  --ngd-success: #1a7f4b;   --ngd-success-bg: #e7f5ee;   --ngd-success-border: #b7e0c8;
  --ngd-warning: #b7791f;   --ngd-warning-bg: #fdf4e3;   --ngd-warning-border: #f0d9a8;
  --ngd-error:   #c0362c;   --ngd-error-bg:   #fdecea;   --ngd-error-border:   #f2c1bc;
  --ngd-info:    #087f75;   --ngd-info-bg:    #e6f7f5;   --ngd-info-border:    #b7e8e2;
  --ngd-neutral: #5b6472;   --ngd-neutral-bg: #eef1f6;   --ngd-neutral-border: #d5dae3;

  /* ---- TYPOGRAPHY ------------------------------------------------------- */
  --ngd-font-sans: "Inter", "Hind", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ngd-font-mono: "SFMono-Regular", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --ngd-font-num: var(--ngd-font-sans); /* tabular numerals via feature setting below */

  /* Type scale (compact, data-dense). 1rem = 16px base. */
  --ngd-fs-2xs: 0.6875rem;  /* 11px — dense table meta */
  --ngd-fs-xs:  0.75rem;    /* 12px — labels, chips */
  --ngd-fs-sm:  0.8125rem;  /* 13px — table body, secondary */
  --ngd-fs-md:  0.875rem;   /* 14px — DEFAULT body */
  --ngd-fs-lg:  1rem;       /* 16px — emphasized body */
  --ngd-fs-xl:  1.125rem;   /* 18px — card titles */
  --ngd-fs-2xl: 1.375rem;   /* 22px — page titles */
  --ngd-fs-3xl: 1.75rem;    /* 28px — dashboard hero numbers */

  --ngd-fw-regular: 400;
  --ngd-fw-medium: 500;
  --ngd-fw-semibold: 600;
  --ngd-fw-bold: 700;

  --ngd-lh-tight: 1.2;
  --ngd-lh-snug: 1.35;
  --ngd-lh-normal: 1.5;

  /* ---- SPACING (4px base) ---------------------------------------------- */
  --ngd-space-0: 0;
  --ngd-space-1: 0.25rem;   /* 4 */
  --ngd-space-2: 0.5rem;    /* 8 */
  --ngd-space-3: 0.75rem;   /* 12 */
  --ngd-space-4: 1rem;      /* 16 */
  --ngd-space-5: 1.5rem;    /* 24 */
  --ngd-space-6: 2rem;      /* 32 */
  --ngd-space-7: 3rem;      /* 48 */

  /* ---- RADIUS ----------------------------------------------------------- */
  --ngd-radius-xs: 4px;
  --ngd-radius-sm: 6px;
  --ngd-radius-md: 8px;     /* DEFAULT for cards/inputs/buttons */
  --ngd-radius-lg: 12px;
  --ngd-radius-pill: 999px;

  /* ---- SHADOWS (restrained; no excessive glass/gradients) --------------- */
  --ngd-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ngd-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ngd-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
  --ngd-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16); /* modals/popovers only */

  /* ---- Z-INDEX SCALE ---------------------------------------------------- */
  --ngd-z-base: 0;
  --ngd-z-sticky: 100;      /* sticky table headers / sticky first column */
  --ngd-z-header: 200;      /* app top header */
  --ngd-z-drawer: 300;      /* sidebars, filter drawers */
  --ngd-z-overlay: 400;     /* modal backdrop */
  --ngd-z-modal: 410;       /* modal content */
  --ngd-z-toast: 500;       /* toasts (always on top) */
  --ngd-z-tooltip: 600;

  /* ---- LAYOUT ----------------------------------------------------------- */
  --ngd-header-h: 56px;
  --ngd-sidebar-w: 232px;
  --ngd-sidebar-w-collapsed: 60px;
  --ngd-container-max: 1440px;
  --ngd-touch-min: 44px;    /* WCAG minimum touch target */

  /* ---- MOTION (reduced-motion aware; see media query below) ------------- */
  --ngd-transition-fast: 120ms ease;
  --ngd-transition: 180ms ease;

  /* ---- BRAND WORDMARK (PLACEHOLDER) ------------------------------------- */
  /* No official NGD logo asset exists in repo (only favicon.ico + a hero PNG).
     Prototype renders a text wordmark "◆ NGD" using these tokens. Replace
     --ngd-logo-src with the official SVG/PNG path when provided. */
  --ngd-logo-src: url("/brand/diamvo-logo-black.svg");               /* e.g. url("/img/ngd-logo.svg") */
  --ngd-logo-wordmark: "Diamvo";
  --ngd-logo-tagline: "Marketplace";
}

/* Accessibility: honor reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  :root { --ngd-transition-fast: 0ms; --ngd-transition: 0ms; }
}

/* Tabular numerals helper for money/spec columns */
.ngd-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }