/* OfficiallySp Design System - Shared Tokens
 * Use this file to align design language across all OfficiallySp sites.
 * Override --os-accent for each site's visual identity.
 * Link: <link rel="stylesheet" href="https://officiallysp.net/assets/css/design-tokens.css" />
 */

:root {
  /* OfficiallySp bar - override --os-accent per site */
  --os-accent: #6366f1;
  --os-bar-bg: rgba(10, 10, 10, 0.95);
  --os-bar-text: #b3b3b3;
  --os-bar-hover: #ffffff;
  /* Typography - Consistent across all sites */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  --line-tight: 1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.75;
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  
  /* Layout */
  --container-width: 1280px;
  --container-padding: 1.5rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shared OfficiallySp footer - minimal branding */
.officiallysp-footer {
  text-align: center;
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #808080);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: auto;
}

.officiallysp-footer a {
  color: var(--color-accent, #6366f1);
  text-decoration: none;
  transition: opacity 0.2s;
}

.officiallysp-footer a:hover {
  opacity: 0.8;
}

/* OfficiallySp top bar - cohesive branding across all sites */
.officiallysp-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--os-bar-bg);
  color: var(--os-bar-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}

.officiallysp-bar:hover {
  color: var(--os-bar-hover);
  background: rgba(20, 20, 20, 0.98);
}

.officiallysp-bar .os-icon {
  opacity: 0.8;
}

.officiallysp-bar .os-accent {
  color: var(--os-accent);
  font-weight: 600;
}