/* ═══════════════════════════════════════════════════════════
   RepublicMC — Design Tokens & Variables
   ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Palette */
  --bg: #cfdce8;
  --bg-soft: rgba(255, 255, 255, 0.28);
  --surface: rgba(255, 255, 255, 0.58);
  --surface-dim: rgba(255, 255, 255, 0.38);
  --border: rgba(255, 255, 255, 0.56);
  --border-strong: rgba(0, 0, 0, 0.14);

  /* Glass tokens */
  --glass-blur: blur(16px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.56);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.72);

  /* Text */
  --text: #111110;
  --text-muted: #6b6b68;
  --text-faint: #9b9b97;

  /* Accent — single cyan */
  --accent: #0ea5c9;
  --accent-light: rgba(14, 165, 201, 0.14);
  --accent-dark: #0c87a5;

  /* Status */
  --success: #16a34a;
  --success-light: #dcfce7;

  /* Spacing / Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Shadows — frosted depth */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08), var(--glass-highlight);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.10), var(--glass-highlight);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12), var(--glass-highlight);

  /* Layout */
  --max: 1280px;

  /* Easing */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}