/**
 * shared/css/variables.css
 * CSS custom properties (design tokens) shared by ALL sub-apps.
 * Each sub-app must link this file FIRST, before its own stylesheet.
 */

:root {
  /* ── Backgrounds ── */
  --bg-primary:   #f0f2f5;
  --bg-secondary: #e4e8ec;
  --bg-card:      #ffffff;
  --bg-tertiary:  #e8ecf1;
  --bg-elevated:  #f5f7fa;
  --bg-input:     #eef2f6;

  /* ── Card accents (subtle color tints per card type) ── */
  --card-accent-blue:   rgba(33,150,243,0.06);
  --card-accent-green:  rgba(76,175,80,0.06);
  --card-accent-purple: rgba(124,58,237,0.06);
  --card-accent-orange: rgba(255,152,0,0.06);

  /* ── Text ── */
  --text-primary:   #1a1a2e;
  --text-secondary: #4a5568;
  --text-tertiary:  #718096;

  /* ── Borders ── */
  --border-color: #e2e8f0;

  /* ── Brand accents ── */
  --color-green:  #4CAF50;
  --color-blue:   #2196F3;
  --color-red:    #f44336;
  --color-yellow: #ffeb3b;
  --color-purple: #7c3aed;   /* ← Shifts Tracker */

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.16);

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* ── Radius ── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  24px;
}

/* ── Dark-mode token overrides ── */
.dark-mode {
  --bg-primary:   #0f1218;
  --bg-secondary: #181c26;
  --bg-card:      #1e2330;
  --bg-tertiary:  #252b3a;
  --bg-elevated:  #2a3142;
  --bg-input:     #2d3548;

  --text-primary:   #e8ecf4;
  --text-secondary: #9ba3b5;
  --text-tertiary:  #6b7280;

  --border-color: #3a4255;

  --card-accent-blue:   rgba(33,150,243,0.12);
  --card-accent-green:  rgba(76,175,80,0.12);
  --card-accent-purple: rgba(124,58,237,0.12);
  --card-accent-orange: rgba(255,152,0,0.12);
}

/* ── Globally shared utilities ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-links { position: absolute; top: -40px; left: 0; z-index: 9999; }
.skip-link {
  background: var(--color-green);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  font-size: 0.9rem;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ── Dark mode toggle shared UI ── */
.hub-dark-toggle {
  position: fixed;
  top: 18px; right: 18px;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50px;
  padding: 7px 14px;
  color: var(--text-primary);
  font-size: 0.82rem;
  cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  transition: background 0.3s, color 0.3s;
  z-index: 100;
}
.hub-dark-toggle:hover { background: rgba(0,0,0,0.1); }
.dark-mode .hub-dark-toggle {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: white;
}
.dark-mode .hub-dark-toggle:hover { background: rgba(255,255,255,0.22); }