/* ===================================================================
   SISTEMA DE DISEÑO: TINOGOLD (MMORPG ASSET EXCHANGE)
   TOKENS DE DISEÑO & VARIABLES GLOBALES
   =================================================================== */

:root {
  /* Brand Accents */
  --color-primary: #FFF0CC;
  --color-primary-container: #FFD000; /* Cyber Gold */
  --color-on-primary: #3C2F00;
  --color-on-primary-container: #6F5A00;
  --color-primary-fixed: #FFE082;
  --color-primary-fixed-dim: #EEC200;
  --color-surface-tint: #EEC200;

  --color-secondary: #DCFDFF;
  --color-secondary-container: #00F1FD; /* Electric Cyan */
  --color-secondary-fixed: #6FF6FF;
  --color-secondary-fixed-dim: #00DCE6;
  --color-on-secondary: #00373A;
  --color-on-secondary-container: #006A6F;

  --color-tertiary: #FBEDFF;
  --color-tertiary-container: #E9C9FF; /* Arcane Violet */
  --color-on-tertiary: #4C007D;
  --color-on-tertiary-container: #8130C1;

  /* Surfaces & Obsidian Matrix */
  --color-bg-lowest: #0B0E14; /* Obsidian Floor */
  --color-bg-base: #10131A;
  --color-surface: #10131A;
  --color-surface-low: #191C22;
  --color-surface-container: #1D2026;
  --color-surface-high: #272A31;
  --color-surface-highest: #32353C;
  --color-surface-bright: #363940;

  /* Typography Colors */
  --color-on-surface: #E1E2EB;
  --color-on-surface-variant: #D1C6AB;
  --color-outline: #9A9077;
  --color-outline-variant: #4E4632;

  /* Status Semantics */
  --color-verified: #10B981;
  --color-escrow: #F5A623;
  --color-danger: #FFB4AB;
  --color-danger-container: #93000A;

  /* Typography Families */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Chivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace, monospace;

  /* Spacing Scale */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2.5rem;   /* 40px */
  --space-2xl: 4rem;    /* 64px */

  /* Gutters & Margins */
  --gutter-mobile: 1.25rem;
  --gutter-desktop: 1.75rem;
  --margin-mobile: 1rem;
  --margin-tablet: 2rem;
  --margin-desktop: 3.5rem;
  --container-max-width: 1720px;

  /* Border Radii (Chamfered Tactical RPG) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows & Neon Halos */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 16px 36px -10px rgba(0, 0, 0, 0.8), 0 0 24px -4px rgba(255, 208, 0, 0.08);
  --shadow-card-hover: 0 20px 48px -8px rgba(0, 0, 0, 0.9), 0 0 32px -2px rgba(255, 208, 0, 0.22);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 242, 254, 0.35), 0 0 40px rgba(0, 242, 254, 0.15);
  --shadow-gold-btn: 0 0 24px rgba(255, 208, 0, 0.35);
  --shadow-gold-btn-hover: 0 0 35px rgba(255, 208, 0, 0.65);
  --shadow-cyan-glow: 0 0 20px rgba(0, 241, 253, 0.3);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Backdrop Blur */
  --glass-blur: blur(16px);
  --glass-blur-deep: blur(24px);
}