/*
 * NXG Design Tokens
 * Adapted from PBC tokens for the NXG environment.
 * Maps directly to Web Awesome (WA) components.
 * 
 * Note: Since nxg-styles.css is currently a placeholder, values below mirror PBC defaults.
 * Replace these with your actual NXG color palette as needed.
 */
:root {
  /* --- Layout & Backgrounds --- */
  --nxg-app-bg: #fbfbf8;
  --nxg-surface: rgba(255, 255, 255, 0.82);
  --nxg-surface-solid: #ffffff;
  --nxg-surface-muted: #f1f2ef;

  /* --- Borders --- */
  --nxg-border: #e2e4df;
  --nxg-border-strong: #d5d8d0;

  /* --- Typography --- */
  --nxg-text: #1f2320;
  --nxg-text-muted: #697067;
  --nxg-text-soft: #8a9087;
  --nxg-font-family: Inter, ui-sans-serif, system-ui, sans-serif;

  /* --- Semantic Colors --- */
  --nxg-accent: #f38741;
  --nxg-accent-hover: #d97332;
  --nxg-success: #1e8f5a;
  --nxg-warning: #b7791f;
  --nxg-danger: #c2413b;

  /* --- Contrast & Content --- */
  --nxg-on-accent: #ffffff;
  --nxg-on-semantic: #ffffff;

  /* --- Effects & Animation --- */
  --nxg-radius-lg: 22px;
  --nxg-radius-md: 12px;
  --nxg-shadow-float: 0 24px 80px rgba(30, 35, 32, 0.14);
  --nxg-shadow-card: 0 8px 26px rgba(30, 35, 32, 0.06);
  --nxg-transition: 160ms ease;

  /* --- Layout & Backgrounds --- */
  --nxg-app-bg: #fbfbf8;
  --nxg-surface: rgba(255, 255, 255, 0.82);
  --nxg-surface-solid: #ffffff;
  --nxg-surface-muted: #f1f2ef;

  /* --- Borders --- */
  --nxg-border: #e2e4df;
  --nxg-border-strong: #d5d8d0;

  /* --- Typography --- */
  --nxg-text: #1f2320;
  --nxg-text-muted: #697067;
  --nxg-text-soft: #8a9087;
  --nxg-font-family: Inter, ui-sans-serif, system-ui, sans-serif;

  /* --- Semantic Colors --- */
  --nxg-accent: #f38741;
  --nxg-accent-hover: #d97332;
  --nxg-success: #1e8f5a;
  --nxg-warning: #b7791f;
  --nxg-danger: #c2413b;

  /* --- Contrast & Content --- */
  --nxg-on-accent: #ffffff;
  --nxg-on-semantic: #ffffff;

  /* --- Effects & Animation --- */
  --nxg-radius-lg: 22px;
  --nxg-radius-md: 12px;
  --nxg-shadow-float: 0 24px 80px rgba(30, 35, 32, 0.14);
  --nxg-shadow-card: 0 8px 26px rgba(30, 35, 32, 0.06);
  --nxg-transition: 160ms ease;

  /* --- Map PBC Variables to NXG Values --- */
  /* This ensures both WA mappings (from pbc-wa-tokens.css) and direct --pbc-* usages resolve correctly */

  /* 1. Semantic Colors */
  --pbc-accent: var(--nxg-accent);
  --pbc-success: var(--nxg-success);
  --pbc-warning: var(--nxg-warning);
  --pbc-danger: var(--nxg-danger);

  /* 2. Text & Neutrals */
  --pbc-text: var(--nxg-text);
  --pbc-text-muted: var(--nxg-text-muted);
  --pbc-text-soft: var(--nxg-text-soft);

  /* 3. Layout, Surfaces & Borders */
  --pbc-app-bg: var(--nxg-app-bg);
  --pbc-surface-solid: var(--nxg-surface-solid);
  --pbc-surface-muted: var(--nxg-surface-muted);
  --pbc-border: var(--nxg-border);

  /* --- Web Awesome Theme Mappings --- */

  /* 1. Primary Branding */
  --wa-color-brand-fill-loud: var(--nxg-accent);
  --wa-color-brand-border-loud: var(--nxg-accent);
  --wa-color-neutral-on-normal: var(--nxg-text);

  /* 2. Success, Warning, Danger */
  --wa-color-success-fill-loud: var(--nxg-success);
  --wa-color-success-on-fill-loud: var(--nxg-on-semantic);

  --wa-color-warning-fill-loud: var(--nxg-warning);
  --wa-color-warning-on-fill-loud: var(--nxg-on-semantic);

  --wa-color-danger-fill-loud: var(--nxg-danger);
  --wa-color-danger-on-fill-loud: var(--nxg-on-semantic);
  --wa-color-danger-fill-normal: var(--nxg-danger);
  --wa-color-danger-on-normal: var(--nxg-on-semantic);

  /* 3. Text and Neutrals */
  --wa-color-text-normal: var(--nxg-text);
  --wa-color-text-quiet: var(--nxg-text-muted);

  /* 4. Surfaces & Borders */
  --wa-color-surface-default: var(--nxg-app-bg);
  --wa-color-surface-raised: var(--nxg-surface-solid);
  --wa-color-surface-border: var(--nxg-border);

  /* 5. Typography */
  --wa-font-family-body: var(--nxg-font-family);
  --wa-font-family-heading: var(--nxg-font-family);

  /* 6. Border Radii */
  --wa-border-radius-m: var(--nxg-radius-md);
  --wa-border-radius-l: var(--nxg-radius-lg);
  --wa-border-radius-pill: 9999px;
  --wa-border-radius-circle: 50%;

  /* 7. Shadows */
  --wa-shadow-m: var(--nxg-shadow-card);
  --wa-shadow-l: var(--nxg-shadow-float);
}