/**
 * Cupcake 2048 Shared Design Tokens
 * 
 * Implements the semantic layer for Dark and Light modes.
 * Usage: Consumed by both acquisition and canonical themes.
 */

:root {
  /* ------------------------------------------------------------------------
   * 1. STATIC TOKENS (Shared across modes)
   * ------------------------------------------------------------------------ */

  /* Typography Scale (Rem-based for zoom support) */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 2rem;       /* 32px */
  --font-size-3xl: 2.5rem;     /* 40px */
  --font-size-4xl: 3rem;       /* 48px */

  /* Spacing Scale (4px base) */
  --spacing-1: 0.25rem;        /* 4px */
  --spacing-2: 0.5rem;         /* 8px */
  --spacing-3: 0.75rem;        /* 12px */
  --spacing-4: 1rem;           /* 16px */
  --spacing-6: 1.5rem;         /* 24px */
  --spacing-8: 2rem;           /* 32px */
  --spacing-12: 3rem;          /* 48px */
  --spacing-16: 4rem;          /* 64px */

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Motion */
  --motion-duration-fast: 150ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 400ms;
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevation (Shadows) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* ------------------------------------------------------------------------
   * 2. DONT-BREAK DOM COMPATIBILITY TOKENS
   * (Values that preserve vendor positioning assumptions)
   * ------------------------------------------------------------------------ */
  --board-size-desktop: 500px;
  --board-size-mobile: 280px;
  --tile-size-desktop: 107px;
  --tile-size-mobile: 58px;
  --grid-gap-desktop: 15px;
  --grid-gap-mobile: 10px;
}

/* --------------------------------------------------------------------------
 * 3. MODE-SENSITIVE SEMANTIC TOKENS
 * -------------------------------------------------------------------------- */

/* Dark Mode (Default / data-theme="dark") */
:root, [data-theme="dark"] {
  --color-surface: #0F172A;          /* Slate-900 (Navy base) */
  --color-surface-elevated: #1E293B; /* Slate-800 (Board background) */
  --color-surface-overlay: rgba(15, 23, 42, 0.85); /* Overlay backdrop */
  
  --color-text-primary: #F8FAFC;     /* Slate-50 */
  --color-text-secondary: #94A3B8;   /* Slate-400 */
  --color-text-inverse: #0F172A;     /* For text on brand buttons */

  --color-brand: #F59E0B;            /* Amber-500 (Golden cupcake) */
  --color-brand-muted: #B45309;      /* Amber-700 */
  
  --color-border: #334155;           /* Slate-700 */
  --color-border-hover: #475569;     /* Slate-600 */

  --color-state-success: #10B981;    /* Emerald-500 */
  --color-state-error: #EF4444;      /* Red-500 */
  --color-state-focus: #F59E0B;      /* Focused items use Brand color */
}

/* Light Mode (data-theme="light") */
[data-theme="light"] {
  --color-surface: #FDFCF0;          /* Muted Cream */
  --color-surface-elevated: #F5F2E8; /* Bone Cream (Board background) */
  --color-surface-overlay: rgba(253, 252, 240, 0.9);
  
  --color-text-primary: #1E293B;     /* Slate-800 */
  --color-text-secondary: #64748B;   /* Slate-500 */
  --color-text-inverse: #F8FAFC;     /* Slate-50 (For dark buttons) */

  --color-brand: #D97706;            /* Amber-600 */
  --color-brand-muted: #F59E0B;      /* Amber-500 */
  
  --color-border: #E2E8F0;           /* Slate-200 */
  --color-border-hover: #CBD5E1;     /* Slate-300 */

  --color-state-success: #059669;    /* Emerald-600 */
  --color-state-error: #DC2626;      /* Red-600 */
  --color-state-focus: #D97706;      /* Focused items use Brand color */
}

/* --------------------------------------------------------------------------
 * 4. BOARD / GRID RENDERING TOKENS
 * -------------------------------------------------------------------------- */

/* Dark Mode (Default) */
:root, [data-theme="dark"] {
  /* Board containment */
  --c2048-board-bg: var(--color-surface-elevated);
  --c2048-board-border: var(--color-border);
  --c2048-board-shadow: var(--shadow-lg);

  /* Empty cell visibility */
  --c2048-cell-bg: rgba(255, 255, 255, 0.08);
  --c2048-cell-border: rgba(255, 255, 255, 0.08);

  /* Tile stability during movement (prevents white flash) */
  --c2048-tile-underlay: rgba(255, 255, 255, 0.06);
  --c2048-tile-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
  --c2048-tile-outline: rgba(255, 255, 255, 0.06);
}

/* Light Mode */
[data-theme="light"] {
  /* Board containment (increase separation from page surface) */
  --c2048-board-bg: var(--color-surface-elevated);
  --c2048-board-border: rgba(15, 23, 42, 0.12);
  --c2048-board-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);

  /* Empty cell visibility (increase slot contrast without muddying) */
  --c2048-cell-bg: rgba(15, 23, 42, 0.06);
  --c2048-cell-border: rgba(15, 23, 42, 0.08);

  /* Tile stability during movement (avoid white/default layer exposure) */
  --c2048-tile-underlay: rgba(15, 23, 42, 0.04);
  --c2048-tile-shadow: 0 12px 22px rgba(15, 23, 42, 0.18);
  --c2048-tile-outline: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
 * 5. ACCESSIBILITY UTILITIES
 * -------------------------------------------------------------------------- */

/* Standard WordPress accessibility class */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link:focus {
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  clip: auto !important;
  clip-path: none !important;
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  left: 5px;
  padding: var(--spacing-4) var(--spacing-6);
  position: absolute;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* 146. APPEARANCE TOGGLE COMPONENT */
#appearance-toggle {
  position: fixed;
  top: var(--spacing-4);
  right: var(--spacing-4);
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--motion-duration-fast), background var(--motion-duration-fast);
  box-shadow: var(--shadow-md);
}

#appearance-toggle:hover {
  transform: scale(1.05);
  border-color: var(--color-brand);
}

#appearance-toggle .mode-icon {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* Mode-Aware Iconography */
[data-theme="dark"] #appearance-toggle .mode-icon::before {
  content: '🌙'; /* Simple moon for dark mode */
}

[data-theme="light"] #appearance-toggle .mode-icon::before {
  content: '☀️'; /* Simple sun for light mode */
}

/* Global Focus States */
:focus-visible {
  outline: 3px solid var(--color-state-focus);
  outline-offset: 2px;
}