/*
 * TeachTools Shared Brand Tokens
 * Single source of truth for all TeachTools apps
 * Mount this file in each container and @import or <link> it
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* Typography */
  --tt-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tt-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* TeachTools Brand — Amber */
  --tt-amber: #F59E0B;
  --tt-amber-dark: #D97706;
  --tt-amber-light: rgba(245, 158, 11, 0.12);

  /* ReachOut — Blue */
  --tt-blue: #2563EB;
  --tt-blue-dark: #1D4ED8;
  --tt-blue-light: rgba(37, 99, 235, 0.12);

  /* ResetKey — Green */
  --tt-green: #059669;
  --tt-green-dark: #047857;
  --tt-green-light: rgba(5, 150, 105, 0.12);

  /* AudioGrader — Purple */
  --tt-purple: #7C3AED;
  --tt-purple-dark: #6D28D9;
  --tt-purple-light: rgba(124, 58, 237, 0.12);

  /* GradeCast — Teal */
  --tt-teal: #0891B2;
  --tt-teal-dark: #0E7490;
  --tt-teal-light: rgba(8, 145, 178, 0.12);

  /* Shared Surface Tokens */
  --tt-bg: #0a0f18;
  --tt-surface: #0f172a;
  --tt-card: #1e293b;
  --tt-border: rgba(148, 163, 184, 0.12);
  --tt-text: #F8FAFC;
  --tt-text-muted: #94A3B8;
  --tt-text-dim: #64748B;
  --tt-success: #10B981;
  --tt-danger: #EF4444;
  --tt-warning: #F59E0B;

  /* Shared Radii */
  --tt-radius-sm: 8px;
  --tt-radius: 12px;
  --tt-radius-lg: 16px;
  --tt-radius-xl: 20px;

  /* Shared Transitions */
  --tt-transition: 0.2s ease;
}

/* Shared TeachTools Nav Bar */
.tt-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.875rem 1.25rem;
  background: linear-gradient(135deg, var(--tt-surface), #1a1f35);
  border-bottom: 1px solid var(--tt-border);
  font-family: var(--tt-font);
}

.tt-nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-right: auto;
}

.tt-nav-logo svg { width: 28px; height: 28px; }

.tt-nav-logo span {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tt-text);
  letter-spacing: -0.3px;
}

.tt-nav-logo em {
  font-style: normal;
  color: var(--tt-amber);
}

.tt-nav-links {
  display: flex;
  gap: 4px;
}

.tt-nav-link {
  padding: 0.4rem 0.75rem;
  border-radius: var(--tt-radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tt-text-muted);
  text-decoration: none;
  transition: all var(--tt-transition);
  border: 1px solid transparent;
}

.tt-nav-link:hover {
  color: var(--tt-text);
  background: rgba(255, 255, 255, 0.05);
}

.tt-nav-link.active {
  color: var(--tt-text);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--tt-border);
}

/* Active states per-app */
.tt-nav-link.active[data-app="timer"] { color: var(--tt-amber); border-color: rgba(245, 158, 11, 0.3); }
.tt-nav-link.active[data-app="reachout"] { color: var(--tt-blue); border-color: rgba(37, 99, 235, 0.3); }
.tt-nav-link.active[data-app="resetkey"] { color: var(--tt-green); border-color: rgba(5, 150, 105, 0.3); }
.tt-nav-link.active[data-app="gradecast"] { color: var(--tt-teal); border-color: rgba(8, 145, 178, 0.3); }

.tt-nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--tt-border);
}

.tt-nav-user-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tt-text-muted);
}

.tt-nav-logout {
  font-size: 0.72rem;
  color: var(--tt-text-dim);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color var(--tt-transition);
}

.tt-nav-logout:hover { color: var(--tt-danger); }

/* Mobile */
@media (max-width: 600px) {
  .tt-nav { flex-wrap: wrap; gap: 8px; }
  .tt-nav-links { order: 3; width: 100%; justify-content: center; }
  .tt-nav-user { margin-left: auto; border-left: none; padding-left: 0; }
}