/* ============================================================
   CULTURILY — GLOBAL DESIGN SYSTEM
   Design tokens · Reset · Typography · Utilities · Animations
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=DM+Sans:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ── Design Tokens ────────────────────────────────────────── */
:root {

  /* Background layers — pure dark */
  --bg:        #0e0e0e;
  --surface:   #171717;
  --surface-2: #1e1e1e;
  --surface-3: #262626;
  --surface-4: #2e2e2e;

  /* Global accent (lime) — UI chrome, XP bar, CTA buttons */
  --accent:           #CCFF00;
  --accent-hover:     #b8e600;
  --accent-dim:       rgba(204, 255, 0, 0.10);
  --accent-dim-hover: rgba(204, 255, 0, 0.18);
  --accent-text:      #0e0e0e;

  /* Culture accent — overridden per culture via /css/cultures/*.css */
  --culture-accent:      #CCFF00;
  --culture-accent-2:    #CCFF00;
  --culture-accent-dim:  rgba(204, 255, 0, 0.10);
  --culture-accent-text: #0e0e0e;

  /* Text */
  --text-primary:  #f8f8f8;
  --text-muted:    rgba(248, 248, 248, 0.90);
  --text-subtle:   rgba(248, 248, 248, 0.65);
  --text-disabled: rgba(248, 248, 248, 0.35);

  /* Semantic colours */
  --success:     #4ade80;
  --success-dim: rgba(74, 222, 128, 0.12);
  --error:       #f87171;
  --error-dim:   rgba(248, 113, 113, 0.12);
  --warning:     #fbbf24;
  --warning-dim: rgba(251, 191, 36, 0.12);
  --info:        #60a5fa;
  --info-dim:    rgba(96, 165, 250, 0.12);

  /* Borders */
  --border:        rgba(248, 248, 248, 0.07);
  --border-strong: rgba(248, 248, 248, 0.14);
  --border-accent: rgba(204, 255, 0, 0.35);

  /* Spacing scale (4 px base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Border radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* Typefaces */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12 px */
  --text-sm:   0.875rem;   /* 14 px */
  --text-base: 1rem;       /* 16 px */
  --text-lg:   1.125rem;   /* 18 px */
  --text-xl:   1.25rem;    /* 20 px */
  --text-2xl:  1.5rem;     /* 24 px */
  --text-3xl:  1.875rem;   /* 30 px */
  --text-4xl:  2.25rem;    /* 36 px */
  --text-5xl:  3rem;       /* 48 px */
  --text-6xl:  3.75rem;    /* 60 px */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Shadows */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.50);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.65);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.75);
  --shadow-accent:  0 0 28px rgba(204, 255, 0, 0.28);
  --shadow-culture: 0 0 28px color-mix(in srgb, var(--culture-accent) 30%, transparent);
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Easing */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Transition durations */
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   300ms;
  --t-spring: 350ms;

  /* Z-index scale */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* Layout constants */
  --app-width:    480px;   /* game screens — phone-like on desktop */
  --wide-width:   960px;   /* landing page full-bleed sections */
  --nav-bottom-h: 64px;
  --top-bar-h:    60px;
}

/* ── Light mode overrides ─────────────────────────────────── */
/*
 * Toggle by adding class "theme-light" to <html>.
 * The inline <script> in every page's <head> applies this before
 * first paint to prevent flash of wrong theme.
 * Accent (#CCFF00 lime) stays the same in both modes.
 */
html.theme-light {
  --bg:        #FAFAF8;
  --surface:   #F7F7F5;
  --surface-2: #F0EEE9;
  --surface-3: #EDECEA;
  --surface-4: #E4E2DE;

  --text-primary:  #0e0e0e;
  --text-muted:    #222222;
  --text-subtle:   #555555;
  --text-disabled: #999999;

  --border:        #E8E8E8;
  --border-strong: #D0D0D0;
  --border-accent: rgba(204, 255, 0, 0.45);

  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:     0 16px 48px rgba(0, 0, 0, 0.15);
  --shadow-inset:  inset 0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-accent: 0 0 28px rgba(204, 255, 0, 0.35);
}

/* ── Light mode: bottom nav active state ──────────────────── */
/* Lime on white has poor contrast — use near-black icon+label,
   keep lime only as the small bottom underline indicator.      */

html.theme-light .bottom-nav-item.is-active {
  color: #0e0e0e;
}

html.theme-light .bottom-nav-item.is-active::before {
  top: auto;
  bottom: 0;
  background: #CCFF00;
}

/* Smooth transition when theme changes */
html.theme-light *,
html.theme-light *::before,
html.theme-light *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

/* ── Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Accessible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

input,
select,
textarea {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  font-weight: 400;
}

p {
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* ── Typography scale ─────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 7vw, var(--text-6xl));
  font-weight: 300;
  line-height: var(--leading-none);
  letter-spacing: -0.025em;
}

h1, .h1 {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
  font-weight: 300;
  letter-spacing: -0.015em;
}

h2, .h2 {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
  font-weight: 400;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: var(--text-xl);
  font-weight: 400;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
}

.body-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.caption {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-subtle);
}

/* Small-caps label above a heading */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-subtle);
}

/* ── Colour utilities ─────────────────────────────────────── */
.text-primary   { color: var(--text-primary); }
.text-muted     { color: var(--text-muted); }
.text-subtle    { color: var(--text-subtle); }
.text-disabled  { color: var(--text-disabled); }
.text-accent    { color: var(--accent); }
.text-culture   { color: var(--culture-accent); }
.text-success   { color: var(--success); }
.text-error     { color: var(--error); }
.text-warning   { color: var(--warning); }

/* ── Layout helpers ───────────────────────────────────────── */

/* Constrain to app width with centred padding */
.container {
  width: 100%;
  max-width: var(--app-width);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* Landing/marketing wide container */
.container-wide {
  width: 100%;
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

/* Page wrapper — accounts for top bar + bottom nav */
.page-content {
  padding-top: calc(var(--top-bar-h) + var(--sp-4));
  padding-bottom: calc(var(--nav-bottom-h) + var(--sp-6));
}

/* Page wrapper for auth/onboarding — no nav bars */
.page-bare {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }

.gap-1  { gap: var(--sp-1); }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }

.grid  { display: grid; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100dvh; }

/* Spacing shorthands */
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

/* ── Typography utilities ─────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Visibility ───────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hidden    { display: none !important; }
.invisible { visibility: hidden; }

/* ── Borders, surfaces ────────────────────────────────────── */
.bg-surface   { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }
.bg-surface-3 { background: var(--surface-3); }
.border        { border: 1px solid var(--border); }
.border-strong { border: 1px solid var(--border-strong); }
.border-accent { border: 1px solid var(--border-accent); }
.rounded-sm    { border-radius: var(--r-sm); }
.rounded-md    { border-radius: var(--r-md); }
.rounded-lg    { border-radius: var(--r-lg); }
.rounded-xl    { border-radius: var(--r-xl); }
.rounded-full  { border-radius: var(--r-full); }

/* ── Dividers ─────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

/* "— or —" separator on auth pages */
.divider-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-subtle);
  font-size: var(--text-sm);
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Scrollbar (webkit) ───────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-4);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── Selection colour ─────────────────────────────────────── */
::selection {
  background: var(--accent-dim);
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────── */
/* ANIMATIONS                                                   */
/* ─────────────────────────────────────────────────────────── */

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

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

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

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

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Correct-answer springy pop */
@keyframes pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.10); }
  65%  { transform: scale(0.97); }
  85%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Wrong-answer horizontal shake */
@keyframes shake {
  0%,  100% { transform: translateX(0); }
  15%        { transform: translateX(-7px); }
  30%        { transform: translateX(7px); }
  45%        { transform: translateX(-5px); }
  60%        { transform: translateX(5px); }
  75%        { transform: translateX(-3px); }
  90%        { transform: translateX(3px); }
}

/* Streak fire pulse */
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.15); opacity: 0.85; }
}

/* Skeleton loading shimmer */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* Toast notification slide-in from right */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0)    scale(1); }
  to   { opacity: 0; transform: translateX(24px) scale(0.95); }
}

/* Modal entrance */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Stars pop-in (delay each star via JS class or nth-child) */
@keyframes starPop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(5deg); opacity: 1; }
  80%  { transform: scale(0.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* XP number glow on count-up */
@keyframes xpGlow {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 20px var(--accent); }
}

/* Level-up radiating ring */
@keyframes ring {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Floating confetti particle (applied via JS) */
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg);  opacity: 1; }
  100% { transform: translateY(130vh) rotate(720deg); opacity: 0; }
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Empty-state illustration gentle float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Animation utility classes ────────────────────────────── */
.animate-fade-in    { animation: fadeIn    var(--t-base)   var(--ease-out)    both; }
.animate-slide-up   { animation: slideUp   var(--t-slow)   var(--ease-out)    both; }
.animate-slide-down { animation: slideDown var(--t-slow)   var(--ease-out)    both; }
.animate-pop        { animation: pop       var(--t-spring) var(--ease-spring) both; }
.animate-shake      { animation: shake     400ms           var(--ease)        both; }
.animate-pulse      { animation: pulse     1.4s            ease-in-out infinite; }
.animate-spin       { animation: spin      800ms           linear      infinite; }
.animate-float      { animation: float     3s              ease-in-out infinite; }
.animate-xp-glow    { animation: xpGlow    1.2s            ease-in-out; }

/* Stagger helpers — apply to list children */
.stagger-1 { animation-delay: 60ms;  }
.stagger-2 { animation-delay: 120ms; }
.stagger-3 { animation-delay: 180ms; }
.stagger-4 { animation-delay: 240ms; }
.stagger-5 { animation-delay: 300ms; }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:      0.01ms !important;
    scroll-behavior: auto !important;
  }
}