/* ==========================================================
   YioGames Core — Design System (Arcadino Benchmarked Palette)
   Deep dark background (#0F0D12), Card Surface (#1B1820),
   Vibrant Crimson/Red primary accent (#E53935) with Warm Amber (#FFC107).
   ========================================================== */

:root {
  /* --- BRAND IDENTITY PALETTE (Arcadino Benchmarked) --- */
  --yio-brand-primary:        #e53935;   /* Arcadino Vibrant Crimson/Red — Key accents, badges, focused rings */
  --yio-brand-primary-hover:  #ef5350;   /* Brighter Crimson hover */
  --yio-brand-soft:           #ff7043;   /* Warm Orange / Coral highlight */
  --yio-brand-secondary:      #ffc107;   /* Arcadino Warm Amber / Gold */
  --yio-brand-surface:        rgba(229, 57, 53, 0.12); /* Subtle crimson tinted accent surface */
  --yio-brand-gradient:       linear-gradient(135deg, #e53935 0%, #ffc107 100%);
  
  --yio-brand-success:        #10b981;   /* Emerald — Verified functional status */
  --yio-brand-warning:        #ffc107;   /* Amber — Partial compatibility note */
  --yio-brand-danger:         #e53935;   /* Crimson — Runtime error */

  /* --- DARK SURFACE HIERARCHY (Arcadino Benchmarked) --- */
  --yio-bg-base:              #0f0d12;   /* Arcadino Root Dark Background */
  --yio-bg-surface:           #1b1820;   /* Arcadino Card / Sidebar Surface */
  --yio-bg-elevated:          #24202b;   /* Raised inputs, search bar, dropdowns */
  --yio-bg-hover:             #2c2835;   /* Interactive dark hover */
  --yio-bg-border:            rgba(255, 255, 255, 0.1);   /* Arcadino subtle border */
  --yio-bg-border-subtle:     rgba(255, 255, 255, 0.06);  /* Inner component borders */

  /* --- TEXT CONTRAST TOKENS (WCAG AA/AAA Compliant) --- */
  --yio-text-primary:         #ffffff;   /* Pure white main reading */
  --yio-text-secondary:       rgba(255, 255, 255, 0.7);  /* Arcadino secondary text */
  --yio-text-muted:           rgba(255, 255, 255, 0.55); /* Arcadino muted text */
  --yio-text-inverse:         #0f0d12;   /* Dark contrast text on accent buttons */

  /* --- TYPOGRAPHY --- */
  --yio-font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yio-font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --yio-text-xs:   0.6875rem;  /* 11px */
  --yio-text-sm:   0.75rem;    /* 12px */
  --yio-text-base: 0.875rem;   /* 14px */
  --yio-text-md:   1rem;       /* 16px */
  --yio-text-lg:   1.125rem;   /* 18px */
  --yio-text-xl:   1.25rem;    /* 20px */
  --yio-text-2xl:  1.5rem;     /* 24px */
  --yio-text-3xl:  1.875rem;   /* 30px */

  --yio-leading-tight:  1.2;
  --yio-leading-snug:   1.35;
  --yio-leading-normal: 1.55;
  --yio-leading-loose:  1.75;

  /* --- SPACING SCALE --- */
  --yio-space-1:  0.25rem;   /* 4px */
  --yio-space-2:  0.5rem;    /* 8px */
  --yio-space-3:  0.75rem;   /* 12px */
  --yio-space-4:  1rem;      /* 16px */
  --yio-space-5:  1.25rem;   /* 20px */
  --yio-space-6:  1.5rem;    /* 24px */
  --yio-space-8:  2rem;      /* 32px */
  --yio-space-10: 2.5rem;    /* 40px */
  --yio-space-12: 3rem;      /* 48px */

  /* --- LAYOUT & METRICS --- */
  --yio-header-h:             60px;
  --yio-sidebar-w:            230px; /* Fully expanded sidebar width */
  --yio-sidebar-collapsed-w:  64px;  /* Icon rail width */
  --yio-ad-rail-w:            160px; /* Future outer ad skyscraper width */

  /* --- BORDERS & RADII --- */
  --yio-radius-sm:  4px;
  --yio-radius-md:  8px;
  --yio-radius-lg:  12px;
  --yio-radius-full: 9999px;

  /* --- SHADOWS --- */
  --yio-shadow-card:       0 2px 6px rgba(0, 0, 0, 0.5);
  --yio-shadow-card-hover: 0 8px 24px rgba(229, 57, 53, 0.18);
  --yio-shadow-modal:      0 12px 36px rgba(0, 0, 0, 0.85);
  --yio-shadow-sidebar:    6px 0 28px rgba(0, 0, 0, 0.45);

  /* --- TRANSITIONS --- */
  --yio-transition-fast:   140ms cubic-bezier(0.4, 0, 0.2, 1);
  --yio-transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-INDEX TIERS --- */
  --yio-z-sidebar: 90;
  --yio-z-header:  100;
  --yio-z-drawer:  150;
  --yio-z-modal:   200;
  --yio-z-toast:   300;
}