/* Shared CSS Variables for monono frontend
 * Loaded by index.html and admin.html
 * Provides consistent color system across all pages
 */

:root {
  /* ── Core Colors ── */
  --bg: #ffffff;
  --c: #f8f9fa;
  --c2: #f0f2f5;
  --b: #e8eaed;
  --bh: #e2e5e9;
  --a: #0a0a0a;
  --a2: #1a1a2e;
  --ag: rgba(0, 0, 0, 0.02);
  --t: #1a1a2e;
  --t2: #4a4a68;
  --t3: #525252;
  --t4: #848a94;
  --g: #10b981;
  --gl: rgba(16, 185, 129, 0.08);

  /* ── Accent ── */
  --accent: #0a0a0a;
  --accent-dark: #1a1a2e;
  --accent-soft: rgba(10, 10, 10, 0.06);
  --accent-glow: rgba(10, 10, 10, 0.12);

  /* ── Surface ── */
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #ffffff;
  --overlay: rgba(0, 0, 0, 0.4);
  --surface-hover: rgba(0, 0, 0, 0.03);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* ── Glow ── */
  --glow: rgba(16, 185, 129, 0.08);
  --glow-border: rgba(16, 185, 129, 0.15);

  /* ── Today ── */
  --today: #3b82f6;
  --today-soft: rgba(59, 130, 246, 0.12);

  /* ── Aliases ── */
  --card: var(--c);
  --muted: var(--t3);
  --text: var(--t);
  --bg2: var(--c2);
  --r: 12px;

  /* ── Named Colors ── */
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.1);
  --color-inverse: #ffffff;
  --color-bookmark: #f59e0b;
  --color-bookmark-bg: rgba(245, 158, 11, 0.06);
  --color-bookmark-bg-active: rgba(245, 158, 11, 0.12);
  --color-score-recommended: #059669;
  --color-score-popular: #d97706;
  --color-pink: #ec4899;
  --color-pink-bg: rgba(236, 72, 153, 0.06);
  --color-pink-bg-active: rgba(236, 72, 153, 0.12);
  --color-emerald-dark: #059669;

  /* ── Semantic Aliases ── */
  --text-primary: var(--t);
  --text-secondary: var(--t2);
  --text-muted: var(--t3);
  --text-tertiary: var(--t4);
  --border: var(--b);
  --border-hover: var(--bh);
  --surface-secondary: var(--c);
  --surface-tertiary: var(--c2);
  --text-on-accent: var(--a);
  --accent-secondary: var(--a2);
  --accent-ghost: var(--ag);
  --success: var(--g);
  --success-soft: var(--gl);
  --radius: var(--r);

  /* ── Spacing Scale (4px base) ── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-256: 256px;

  /* ── Text Scale (Tailwind-compatible) ── */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* ── Semantic Status Colors ── */
  --success-bg: #065f46;
  --success-text: #065f46;
  --success-text-dark: #6ee7b7;
  --error-bg: #7f1d1d;
  --error-text: #7f1d1d;
  --error-text-dark: #fca5a5;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --warning-text: #78350f;
  --warning-text-dark: #fbbf24;
  --info-bg: rgba(59, 130, 246, 0.1);
  --info-text: #1e40af;
  --info-text-dark: #93c5fd;
  --error-bg-light: rgba(239, 68, 68, 0.08);
  --error-border: rgba(239, 68, 68, 0.2);
  --success-bg-light: rgba(16, 185, 129, 0.2);
  --success-border: rgba(16, 185, 129, 0.2);
  --focus-ring: rgba(59, 130, 246, 0.1);
  --color-surface-dark: #1a1a2e;
  --color-surface-dark-alt: #2a2a4e;
  --color-error-surface: #fee2e2;

  /* ── Typography ── */
  --font-body: "Mona Sans", system-ui, -apple-system, sans-serif;
  --font-heading: "Mona Sans SemiExtended", "Mona Sans", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;

  /* ── Pastel Category Palette (Iteration-1 Card Design) ── */
  --cat-music: #e8dcf8;
  --cat-film: #dff0d9;
  --cat-community: #fbdce4;
  --cat-arts: #faf3cf;
  --cat-tech: #d8e9f9;
  --cat-nightlife: #e3e0fb;
  --cat-food: #fdeada;
  --cat-kinder: #fff3cd;
  --cat-education: #d1ecf1;
  --cat-sports: #d4edda;
  --cat-default: #eef0f3;
  --cat-badge-bg: rgba(255, 255, 255, 0.9);
}

/* ── Dark Mode ── */
body.dark {
  --red-soft: rgba(239, 68, 68, 0.16);
  --bg: #0a0a0f;
  --c: #12121a;
  --c2: #1a1a25;
  --b: #2a2a3a;
  --bh: #33334a;
  --a: #f0f0f5;
  --a2: #a3e635;
  --ag: rgba(255, 255, 255, 0.03);
  --t: #e8e8f0;
  --t2: #b0b0c8;
  --t3: #8888a8;
  --t4: #666680;
  --g: #34d399;
  --gl: rgba(52, 211, 153, 0.1);
  --accent: #f0f0f5;
  --accent-dark: #d0d0e0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
  --accent-soft: rgba(240, 240, 245, 0.06);
  --accent-glow: rgba(240, 240, 245, 0.12);
  --surface: rgba(10, 10, 15, 0.92);
  --surface-solid: #0a0a0f;
  --overlay: rgba(0, 0, 0, 0.7);
  --surface-hover: rgba(255, 255, 255, 0.03);
  --glow: rgba(52, 211, 153, 0.06);
  --glow-border: rgba(52, 211, 153, 0.2);
  --today: #f59e0b;
  --today-soft: rgba(245, 158, 11, 0.14);
  --card: var(--c);
  --muted: var(--t3);
  --text: var(--t);
  --bg2: var(--c2);

  /* ── Semantic aliases (dark mode) ── */
  --text-primary: var(--t);
  --text-secondary: var(--t2);
  --text-muted: var(--t3);
  --text-tertiary: var(--t4);
  --border: var(--b);
  --border-hover: var(--bh);
  --surface-secondary: var(--c);
  --surface-tertiary: var(--c2);
  --text-on-accent: var(--a);
  --accent-secondary: var(--a2);
  --accent-ghost: var(--ag);
  --success: var(--g);
  --success-soft: var(--gl);
  --radius: var(--r);

  /* ── Spacing Scale (dark mode) ── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-256: 256px;

  /* ── Text Scale (dark mode) ── */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* ── Semantic Status Colors (dark mode) ── */
  --success-bg: #065f46;
  --success-text: #065f46;
  --success-text-dark: #6ee7b7;
  --error-bg: #7f1d1d;
  --error-text: #7f1d1d;
  --error-text-dark: #fca5a5;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --warning-text: #78350f;
  --warning-text-dark: #fbbf24;
  --info-bg: rgba(59, 130, 246, 0.1);
  --info-text: #1e40af;
  --info-text-dark: #93c5fd;
  --error-bg-light: rgba(239, 68, 68, 0.08);
  --error-border: rgba(239, 68, 68, 0.2);
  --success-bg-light: rgba(16, 185, 129, 0.2);
  --success-border: rgba(16, 185, 129, 0.2);
  --focus-ring: rgba(59, 130, 246, 0.1);
  --color-surface-dark: #1a1a2e;
  --color-surface-dark-alt: #2a2a4e;
  --color-error-surface: #fee2e2;

  /* ── Typography (dark mode) ── */
  --font-body: "Mona Sans", system-ui, -apple-system, sans-serif;
  --font-heading: "Mona Sans SemiExtended", "Mona Sans", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;

  /* ── Pastel Category Palette (dark mode: abgedunkelte Tints) ── */
  --cat-music: #2b2440;
  --cat-film: #20301f;
  --cat-community: #3a222e;
  --cat-arts: #34301c;
  --cat-tech: #1e2b3d;
  --cat-nightlife: #262348;
  --cat-food: #372a1e;
  --cat-kinder: #4a3d1e;
  --cat-education: #1e3a3f;
  --cat-sports: #2a3d2a;
  --cat-default: #1a1a25;
  --cat-badge-bg: rgba(10, 10, 15, 0.75);
}

/* ── Accessibility: 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;
  }
}

/* ── Utility: Hide broken images gracefully ── */
img.broken {
  display: none !important;
}

/* ── Small card (po ncard) — flat layout, no media column ── */
.po.ncard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--cat-default);
    margin-bottom: 16px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.2s ease;
}

/* White hover background on all card types */
.po.ncard:hover {
    background: var(--surface-solid);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Category badge — positioned on article, category-colored */
.po.ncard .nc-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.15);
    color: var(--t);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 2;
    font-family: var(--font-heading);
}

/* Image media — only when real image exists */
.po.ncard .nc-media {
    width: 100%;
    border-radius: 0;
}

.po.ncard .nc-media img.event-poster {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0;
}

/* Image copyright — on top of image */
.po.ncard .image-copyright {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}

/* Body — text starts left-aligned, no media column */
.po.ncard .nc-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
}

.po.ncard .nc-title {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--t);
    font-family: var(--font-heading);
    margin: 0;
}

.po.ncard .nc-desc {
    font-size: 14px;
    line-height: 1.4;
    color: var(--t2);
    font-family: var(--font-body);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.po.ncard .nc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--t);
}

.po.ncard .nc-dot {
    font-size: 6px;
    line-height: 1;
    color: var(--t);
}

.po.ncard .nc-pin {
    font-size: 13px;
}

.po.ncard .nc-venue {
    border: 1.5px solid var(--t);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t);
    white-space: nowrap;
}

.po.ncard .nc-bottom {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.po.ncard .nc-social {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--t);
}

.po.ncard .nc-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ncard action buttons — migrated from inline CSS */
.po.ncard .ec-btn--attend,
.po.ncard .att-dropdown-btn,
.po.ncard .ec-btn--bookmark,
.po.ncard .cact,
.po.ncard .cact-bookmark {
    border: 1.5px solid var(--t);
    border-radius: 999px;
    background: transparent;
    color: var(--t);
    font-size: 14px;
    font-weight: 600;
    padding: var(--space-8) var(--space-12);
    min-height: 38px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
}

.po.ncard .ec-btn--attend:hover,
.po.ncard .att-dropdown-btn:hover,
.po.ncard .ec-btn--bookmark:hover,
.po.ncard .cact:hover,
.po.ncard .cact-bookmark:hover {
    background: var(--t);
    color: var(--bg);
    border-color: var(--t);
}

/* Saved state: black bg, white text */
.po.ncard .ec-btn--bookmark.on,
.po.ncard .cact.on,
.po.ncard .cact-bookmark.on {
    background: var(--t);
    color: var(--bg);
    border-color: var(--t);
}

.po.ncard .ec-btn--attend .chevron,
.po.ncard .att-dropdown-btn .chevron {
    font-size: 10px;
    opacity: 0.7;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.po.ncard .ec-btn--attend .chevron svg,
.po.ncard .att-dropdown-btn .chevron svg {
    width: 16px;
    height: 16px;
}

/* Remove fallback emoji background — no longer used */
.event-poster-fb {
    display: none !important;
}

/* ── Utility: Image Copyright ── */
.image-copyright {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}