/* --- SAMAYJOURNAL DESIGN SYSTEM & VISUAL TOKENS --- */

:root {
  --color-primary: #1D4B53;
  --color-primary-surface: #1D4B53;
  --color-primary-text: #1D4B53;
  --color-primary-border: #1D4B53;
  --color-on-primary: #FFFFFF;
  --color-background: #FDF8F5; /* Slightly lighter, cleaner parchment */
  --color-surface: #FFFFFF;
  --color-surface-muted: #F5EAE1;
  --color-paper: #FFFFFF;
  --color-ink: #1E293B; /* Modern slate-800 instead of pure black */
  --color-graphite: #475569; /* Slate-600 */
  --color-accent: #E87C63;
  --color-secondary: #64748B;
  --color-success: #15803D;
  --color-danger: #DC2626;
  --color-border-muted: #E2E8F0;
}

.dark {
  --color-primary: #A6E1EA;
  --color-primary-surface: #1D4B53;
  --color-primary-text: #A6E1EA;
  --color-primary-border: #A6E1EA;
  --color-on-primary: #0F172A; /* FIXED: Dark text on light teal primary button for legibility */
  --color-background: #0B1120; /* Modern very dark blue/slate */
  --color-surface: #1E293B; /* Slate 800 for cards */
  --color-surface-muted: #0F172A;
  --color-paper: #1E293B;
  --color-ink: #F8FAFC;
  --color-graphite: #94A3B8;
  --color-accent: #FDBA74;
  --color-secondary: #64748B;
  --color-success: #4ADE80;
  --color-danger: #F87171;
  --color-border-muted: rgba(148, 163, 184, 0.15);
}

/* --- TYPOGRAPHY MAPPINGS --- */

body {
  font-family: 'Public Sans', sans-serif;
  background-color: var(--color-background);
  color: var(--color-ink);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

.font-serif {
  font-family: 'Fraunces', serif;
}

.font-brand {
  font-family: 'Montserrat', 'Public Sans', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* --- BRAND WORDMARK STYLE --- */
.brand-wordmark {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.02em;
}
.brand-wordmark em {
  font-style: italic !important;
  font-weight: 500 !important;
}
.brand-wordmark strong {
  font-style: normal !important;
  font-weight: 700 !important;
}

/* --- MATERIAL SYMBOLS STYLING --- */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1;
}

/* --- SEAMLESS LAYOUT ANIMATIONS --- */

.fade-in {
  opacity: 0;
}

.fade-in.is-visible {
  animation: fadeIn 0.8s ease-out forwards;
}

.slide-up {
  opacity: 0;
  transform: translateY(40px);
}

.slide-up.is-visible {
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.float-slow {
  animation: float 6s ease-in-out infinite;
}

/* Page Transition */
body {
  opacity: 0;
  animation: pageFadeIn 0.25s ease-out forwards;
}

body.page-exit {
  animation: pageFadeOut 0.2s ease-out forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pageFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* --- MODERN GLASSMORPHISM UTILITIES --- */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glass-panel {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-panel-sticky {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom-color: rgba(0, 0, 0, 0.05) !important;
}

.dark .glass-panel-sticky {
  background: rgba(11, 17, 32, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- CUSTOM WEBKIT SCROLLBARS --- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 99px;
  border: 2px solid var(--color-background);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* --- INTERACTIVE STATE TRANSITIONS --- */

:where(button, a[href], [role="button"], .interactive-card):not(:disabled) {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- ACCESSIBLE FOCUS STATE OUTLINE SYSTEM --- */
:where(button, a[href], select, input, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-background);
}

.modern-gradient-text {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .modern-gradient-text {
  background: linear-gradient(135deg, var(--color-primary), #FDBA74);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.apple-gradient-text {
  background: linear-gradient(135deg, #111827 0%, #1D4B53 20%, #4285F4 40%, #EA4335 60%, #FBBC05 80%, #34A853 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.95;
  filter: drop-shadow(0px 2px 8px rgba(29, 75, 83, 0.08));
}

.dark .apple-gradient-text {
  background: linear-gradient(135deg, #FFFFFF 0%, #A6E1EA 20%, #4285F4 40%, #EA4335 60%, #FBBC05 80%, #34A853 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.95;
  filter: drop-shadow(0px 2px 10px rgba(166, 225, 234, 0.15));
}

/* --- ACCESSIBLE SKIP TO CONTENT LINK --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-primary);
  color: var(--color-on-primary) !important;
  padding: 12px 24px;
  z-index: 9999;
  font-weight: 600;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}