/* ============================================================
   NETORBUS DESIGN TOKENS — "Empire Standard"
   Red / Gold / Black luxury-performance identity.
   This file is the single source of truth for the visual system.
   Load FIRST on every layout, before all other stylesheets.

   Families:
     Carbon   — blacks & surfaces (warm, not blue)
     Rosso    — performance reds (brand, action, danger)
     Aurum    — burnished golds (value, prestige, focus)
     Steel    — desaturated cool greys (data, info)
     Jade     — restrained greens (success, income)
   ============================================================ */

:root {
  /* ---------- TYPE FAMILIES ---------- */
  --nb-font-display: 'Cinzel', 'Times New Roman', serif;          /* wordmark, heroes, page titles */
  --nb-font-ui: 'Saira', 'Segoe UI', system-ui, sans-serif;       /* body, controls, labels */
  --nb-font-data: 'IBM Plex Mono', 'Consolas', monospace;         /* money, stats, timers, tables */

  /* ---------- TYPE SCALE (fluid) ---------- */
  --nb-text-xs: 0.72rem;
  --nb-text-sm: 0.82rem;
  --nb-text-base: 0.95rem;
  --nb-text-md: 1.08rem;
  --nb-text-lg: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  --nb-text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --nb-text-2xl: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  --nb-text-hero: clamp(2.6rem, 1.8rem + 4vw, 5.4rem);
  --nb-tracking-wide: 0.14em;
  --nb-tracking-caps: 0.22em;

  /* ---------- CARBON (surfaces) ---------- */
  --nb-carbon-0: #070607;   /* void — page edges, deepest wells */
  --nb-carbon-1: #0c0a0b;   /* page base */
  --nb-carbon-2: #131013;   /* panel */
  --nb-carbon-3: #1a1518;   /* raised surface */
  --nb-carbon-4: #241c20;   /* hover / active surface */
  --nb-carbon-5: #2f2429;   /* highest surface, dividers */

  /* ---------- ROSSO (reds) ---------- */
  --nb-oxblood: #4a1218;
  --nb-crimson-deep: #7e1522;
  --nb-crimson: #a8182a;    /* brand red */
  --nb-red: #d92336;        /* primary accent — rosso corsa */
  --nb-red-bright: #ff3348; /* hot highlight, never large areas */
  --nb-ember: #e0565f;      /* soft red for secondary emphasis */

  /* ---------- AURUM (golds) ---------- */
  --nb-bronze: #8a6a2f;
  --nb-gold-dark: #b8901f;
  --nb-gold: #c9a227;       /* burnished gold — borders, icons */
  --nb-gold-bright: #e8c15a;/* champagne — headings, key values */
  --nb-champagne: #f0d896;  /* light gold text */
  --nb-gilt: #f9edc9;       /* near-ivory gold, micro highlights */

  /* ---------- NEUTRAL TEXT (warm ivory) ---------- */
  --nb-ivory: #f2ecdf;      /* strongest text */
  --nb-text: #e6ddcf;       /* body text */
  --nb-text-dim: #b3a898;   /* secondary text */
  --nb-text-faint: #7d746a; /* tertiary, placeholders */
  --nb-white-hot: #fffdf7;  /* micro highlights only */

  /* ---------- STEEL (cool data accents) ---------- */
  --nb-steel: #a3b8ca;
  --nb-steel-bright: #c6d6e4;
  --nb-steel-dim: #6f8299;

  /* ---------- JADE (success / income) ---------- */
  --nb-jade: #46b37a;
  --nb-jade-bright: #5ecf92;
  --nb-jade-dim: #2e7d54;

  /* ---------- SEMANTIC ---------- */
  --nb-success: var(--nb-jade);
  --nb-success-bg: rgba(70, 179, 122, 0.10);
  --nb-danger: #ff4655;
  --nb-danger-bg: rgba(255, 70, 85, 0.10);
  --nb-warning: #e0aa3e;
  --nb-warning-bg: rgba(224, 170, 62, 0.10);
  --nb-info: var(--nb-steel);
  --nb-info-bg: rgba(163, 184, 202, 0.08);
  --nb-disabled-fg: #6b6259;
  --nb-disabled-bg: #191518;

  /* ---------- SURFACES ---------- */
  --nb-surface-page: var(--nb-carbon-1);
  --nb-surface-panel: rgba(19, 13, 16, 0.92);
  --nb-surface-panel-solid: var(--nb-carbon-2);
  --nb-surface-raised: rgba(28, 21, 25, 0.96);
  --nb-surface-inset: rgba(7, 6, 7, 0.65);
  --nb-surface-glass: rgba(16, 11, 13, 0.72);

  /* ---------- BORDERS ---------- */
  --nb-border: rgba(201, 162, 39, 0.16);          /* default: faint gold */
  --nb-border-strong: rgba(201, 162, 39, 0.38);
  --nb-border-red: rgba(217, 35, 54, 0.35);
  --nb-border-soft: rgba(242, 236, 223, 0.08);    /* hairline ivory */
  --nb-border-danger: rgba(255, 70, 85, 0.5);

  /* ---------- SHADOWS ---------- */
  --nb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --nb-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.4);
  --nb-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.45);
  --nb-shadow-up: 0 -6px 24px rgba(0, 0, 0, 0.45);

  /* ---------- GLOWS (use sparingly) ---------- */
  --nb-glow-red: 0 0 18px rgba(217, 35, 54, 0.28);
  --nb-glow-red-strong: 0 0 28px rgba(217, 35, 54, 0.45);
  --nb-glow-gold: 0 0 16px rgba(201, 162, 39, 0.25);
  --nb-glow-gold-strong: 0 0 26px rgba(232, 193, 90, 0.4);
  --nb-glow-jade: 0 0 14px rgba(70, 179, 122, 0.3);
  --nb-glow-danger: 0 0 20px rgba(255, 70, 85, 0.4);

  /* ---------- GRADIENTS ---------- */
  --nb-grad-action: linear-gradient(135deg, #a8182a 0%, #d92336 55%, #b8901f 130%);
  --nb-grad-action-hover: linear-gradient(135deg, #c11f2f 0%, #e5333f 55%, #c9a227 130%);
  --nb-grad-gold: linear-gradient(120deg, #8a6a2f 0%, #c9a227 35%, #f0d896 50%, #c9a227 65%, #8a6a2f 100%);
  --nb-grad-gold-text: linear-gradient(100deg, #b8901f 0%, #e8c15a 30%, #f9edc9 50%, #e8c15a 70%, #b8901f 100%);
  --nb-grad-panel: linear-gradient(180deg, rgba(36, 28, 32, 0.65) 0%, rgba(19, 13, 16, 0.92) 100%);
  --nb-grad-metal: linear-gradient(180deg, #2f2429 0%, #1a1518 45%, #131013 55%, #1c161a 100%);
  --nb-grad-blood: linear-gradient(160deg, #4a1218 0%, #16090b 70%);
  --nb-grad-page: radial-gradient(1200px 700px at 75% -10%, rgba(168, 24, 42, 0.16) 0%, transparent 60%),
                  radial-gradient(900px 600px at -10% 110%, rgba(201, 162, 39, 0.07) 0%, transparent 55%),
                  linear-gradient(180deg, #0c0a0b 0%, #070607 100%);

  /* ---------- TEXTURES (data-URI, zero requests) ---------- */
  --nb-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  --nb-carbon-weave: repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 4px),
                     repeating-linear-gradient(-45deg, rgba(0,0,0,0.22) 0 2px, transparent 2px 4px);
  --nb-scanlines: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  --nb-blueprint: linear-gradient(rgba(201,162,39,0.05) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(201,162,39,0.05) 1px, transparent 1px);

  /* ---------- FOCUS ---------- */
  --nb-focus-ring: 0 0 0 2px rgba(12, 10, 11, 0.9), 0 0 0 4px var(--nb-gold);

  /* ---------- MOTION ---------- */
  --nb-dur-fast: 140ms;
  --nb-dur-base: 220ms;
  --nb-dur-slow: 420ms;
  --nb-dur-reveal: 700ms;
  --nb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nb-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- SPACING ---------- */
  --nb-space-2xs: 0.25rem;
  --nb-space-xs: 0.5rem;
  --nb-space-sm: 0.75rem;
  --nb-space-md: 1rem;
  --nb-space-lg: 1.5rem;
  --nb-space-xl: 2.25rem;
  --nb-space-2xl: 3.5rem;

  /* ---------- RADII (squared-off luxury; large radii cheapen) ---------- */
  --nb-radius-xs: 2px;
  --nb-radius-sm: 4px;
  --nb-radius-md: 6px;
  --nb-radius-lg: 10px;
  --nb-radius-round: 999px;

  /* ---------- Z-INDEX ---------- */
  --nb-z-base: 1;
  --nb-z-sidebar: 50;
  --nb-z-header: 100;
  --nb-z-dropdown: 1000;
  --nb-z-modal: 2000;
  --nb-z-toast: 3000;
  --nb-z-cursor: 9000;

  /* ---------- DATA-VIZ ---------- */
  --nb-viz-1: #d92336;
  --nb-viz-2: #c9a227;
  --nb-viz-3: #a3b8ca;
  --nb-viz-4: #46b37a;
  --nb-viz-5: #e0565f;
  --nb-viz-6: #8a6a2f;
  --nb-viz-grid: rgba(242, 236, 223, 0.07);

  /* ---------- RARITY / STATUS ---------- */
  --nb-rarity-common: #9a9186;
  --nb-rarity-uncommon: #46b37a;
  --nb-rarity-rare: #a3b8ca;
  --nb-rarity-epic: #e0565f;
  --nb-rarity-legendary: #e8c15a;
  --nb-status-online: #5ecf92;
  --nb-status-away: #e0aa3e;
  --nb-status-offline: #6b6259;

  /* ============================================================
     LEGACY ALIASES — old variable names remapped to the new
     system so any un-migrated var() consumer snaps to theme.
     Do not use these in new code.
     ============================================================ */
  --color-bg-dark: var(--nb-carbon-1);
  --color-bg-panel: var(--nb-surface-panel);
  --color-text: var(--nb-text);
  --color-text-muted: var(--nb-text-dim);
  --color-neon-magenta: var(--nb-red);
  --color-neon-cyan: var(--nb-steel);
  --color-neon-green: var(--nb-jade-bright);
  --color-neon-purple: var(--nb-gold);
  --color-accent-pink: var(--nb-ember);
  --color-accent-violet: var(--nb-crimson-deep);
  --color-success: var(--nb-success);
  --color-error: var(--nb-danger);
  --color-warning: var(--nb-warning);
  --color-info: var(--nb-steel);
  --color-premium: var(--nb-gold);
  --accent-bank: var(--nb-gold-bright);
  --accent-market: var(--nb-steel);
  --accent-crypto: var(--nb-jade-bright);
  --accent-agriculture: var(--nb-jade);
  --accent-fighting: var(--nb-red);
  --accent-casino: var(--nb-gold);
  --accent-education: var(--nb-steel);
  --stat-money: var(--nb-jade);
  --stat-health-low: var(--nb-danger);
  --stat-health-high: var(--nb-jade);
  --stat-moves: var(--nb-steel);
  --stat-attack: var(--nb-red);
  --stat-defense: var(--nb-gold);
  --stat-food: var(--nb-warning);
  --z-base: var(--nb-z-base);
  --z-sidebar: var(--nb-z-sidebar);
  --z-header: var(--nb-z-header);
  --z-dropdown: var(--nb-z-dropdown);
  --z-modal: var(--nb-z-modal);
  --z-toast: var(--nb-z-toast);
  --spacing-xs: var(--nb-space-2xs);
  --spacing-sm: var(--nb-space-xs);
  --spacing-md: var(--nb-space-md);
  --spacing-lg: var(--nb-space-lg);
  --spacing-xl: var(--nb-space-xl);
  --radius-sm: var(--nb-radius-sm);
  --radius-md: var(--nb-radius-md);
  --radius-lg: var(--nb-radius-lg);
  --radius-round: var(--nb-radius-round);
}