/* =============================================================================
   SHARED GLOBAL BASE STYLES
   - Design tokens (colors, spacing, grid)
   - Reset/base elements
   - Cross-app utilities
============================================================================= */

/* ============================================================================
   1. DESIGN TOKENS (COLORS, SPACING, TYPOGRAPHY, Z-INDEX, ETC.)
============================================================================ */
:root {
  /* ---- Colors ---- */
  --bg: #202834;
  --text: #fff;
  --accent: #3498db;
  --danger: #e74c3c;
  --sidebar-bg: #2c3e50;
  --sidebar-fg: #fff;
  --curtain-bg: #66737f;
  --curtain-fg: #fff;
  --top-label-bg: #2c3e50;
  --top-label-fg: #fff;

  /* ---- Spacing / Sizing ---- */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;

  /* ---- Typography ---- */
  --label-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Transitions ---- */
  --c2-duration: 220ms;
  --c2-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Z-Index Helpers (Mobile) ---- */
  --z-mobile-sidebar: 40;
  --z-mobile-curtain1: 20;
  --z-mobile-curtain2: 10;

  /* ---- Curtain Font Tokens (Fallbacks, Overridden Per-Platform) ---- */
  --curtain-label-font: 16px;
  --curtain-toplabel-font: 18px;
}

/* ============================================================================
   2. RESET / BASE ELEMENTS
============================================================================ */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent any page scrolling/relayout when the keyboard opens */
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Visually hidden (for accessibility, screen readers) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

[hidden] { display: none !important; }

/* ============================================================================
   3. GLOBAL UTILITIES & UA GATES
============================================================================ */

/* Show only on mobile (override as needed in platform CSS) */
.mobile-only { display: block; }

/* UA gate: never show mobile sidebar/UI on desktop UA, even if viewport is narrow */
html[data-mobile="0"] .mobile-ui,
html[data-mobile="0"] .sidebar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}