@import url(https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Merriweather:wght@400;700&family=Rajdhani:wght@500;600;700&family=Sora:wght@400;500;600;700&display=swap);

/*
 * Oblivion MyBB - Design Tokens and Theme States
 * MyBB integration note:
 * Load this stylesheet first, then base/components/effects/responsive.
 */

:root {
  color-scheme: dark;

  --ob-layout-width: min(80vw, 1580px);
  --ob-layout-width-fluid: min(calc(100vw - 42px), 1960px);
  --ob-header-height: 76px;

  --ob-radius-xs: 8px;
  --ob-radius-sm: 12px;
  --ob-radius-md: 16px;
  --ob-radius-lg: 22px;
  --ob-radius-pill: 999px;

  --ob-space-1: 6px;
  --ob-space-2: 10px;
  --ob-space-3: 14px;
  --ob-space-4: 18px;
  --ob-space-5: 24px;
  --ob-space-6: 32px;
  --ob-space-7: 40px;

  --ob-font-default: "Sora", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ob-font-serif: "Cormorant Garamond", "Times New Roman", serif;
  --ob-font-gaming: "Rajdhani", "Segoe UI", Arial, sans-serif;
  --ob-font-body: var(--ob-font-default);
  --ob-font-title: var(--ob-font-gaming);

  --ob-transition-fast: 120ms;
  --ob-transition-base: 220ms;
  --ob-transition-slow: 380ms;
  --ob-ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1);

  --ob-shadow-xs: 0 6px 15px rgba(0, 0, 0, 0.25);
  --ob-shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.35);
  --ob-shadow-md: 0 18px 46px rgba(0, 0, 0, 0.45);
  --ob-shadow-lg: 0 28px 68px rgba(0, 0, 0, 0.58);
  --ob-glow-soft: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 36px rgba(0, 0, 0, 0.46);

  --ob-bg-0: #0b0d10;
  --ob-bg-1: #13161b;
  --ob-bg-2: #1a1f27;
  --ob-surface-1: rgba(19, 22, 28, 0.88);
  --ob-surface-2: rgba(23, 27, 34, 0.92);
  --ob-surface-3: rgba(15, 18, 23, 0.94);

  --ob-card-alpha: 0.86;
  --ob-card-bg: rgba(20, 24, 31, var(--ob-card-alpha));
  --ob-card-bg-soft: rgba(25, 30, 38, 0.78);
  --ob-card-border: rgba(255, 255, 255, 0.08);
  --ob-separator: rgba(255, 255, 255, 0.07);

  --ob-text-1: #ecedf0;
  --ob-text-2: #b6bcc8;
  --ob-text-3: #8e95a4;
  --ob-accent: #c8a562;
  --ob-accent-2: #9f7e46;
  --ob-accent-ghost: rgba(200, 165, 98, 0.16);
  --ob-success: #62a87e;
  --ob-danger: #c26f6f;
  --ob-focus: rgba(200, 165, 98, 0.35);

  --ob-grid-line: rgba(255, 255, 255, 0.015);
  --ob-background-strength: 0.55;
  --ob-backdrop-blur: 12px;

  --ob-z-effects: 7;
  --ob-z-header: 60;
  --ob-z-customizer: 1200;
}

body.ob-theme-dark {
  color-scheme: dark;
}

body.ob-theme-light {
  color-scheme: light;
  --ob-bg-0: #dee2ea;
  --ob-bg-1: #f0f3f8;
  --ob-bg-2: #ffffff;
  --ob-surface-1: rgba(255, 255, 255, 0.82);
  --ob-surface-2: rgba(255, 255, 255, 0.92);
  --ob-surface-3: rgba(245, 248, 252, 0.95);
  --ob-card-bg: rgba(255, 255, 255, var(--ob-card-alpha));
  --ob-card-bg-soft: rgba(250, 252, 255, 0.92);
  --ob-card-border: rgba(39, 44, 54, 0.12);
  --ob-separator: rgba(39, 44, 54, 0.1);
  --ob-text-1: #10151d;
  --ob-text-2: #263040;
  --ob-text-3: #4c5870;
  --ob-accent: #8b6a2f;
  --ob-accent-2: #6e5325;
  --ob-accent-ghost: rgba(139, 106, 47, 0.14);
  --ob-grid-line: rgba(23, 27, 35, 0.025);
  --ob-shadow-xs: 0 8px 16px rgba(29, 36, 56, 0.08);
  --ob-shadow-sm: 0 16px 28px rgba(29, 36, 56, 0.14);
  --ob-shadow-md: 0 20px 40px rgba(29, 36, 56, 0.2);
  --ob-shadow-lg: 0 28px 52px rgba(29, 36, 56, 0.22);
  --ob-focus: rgba(139, 106, 47, 0.26);
}

body.ob-theme-blue {
  color-scheme: dark;
  --ob-bg-0: #080d14;
  --ob-bg-1: #101826;
  --ob-bg-2: #152235;
  --ob-surface-1: rgba(15, 24, 38, 0.9);
  --ob-surface-2: rgba(17, 28, 44, 0.93);
  --ob-surface-3: rgba(10, 17, 27, 0.96);
  --ob-card-bg: rgba(16, 27, 42, var(--ob-card-alpha));
  --ob-card-bg-soft: rgba(20, 34, 51, 0.82);
  --ob-card-border: rgba(156, 183, 232, 0.18);
  --ob-separator: rgba(156, 183, 232, 0.15);
  --ob-text-1: #e8eefb;
  --ob-text-2: #c1d1eb;
  --ob-text-3: #8da6cc;
  --ob-accent: #89a9db;
  --ob-accent-2: #6f8cc1;
  --ob-accent-ghost: rgba(137, 169, 219, 0.19);
  --ob-focus: rgba(137, 169, 219, 0.38);
}

body.ob-bg-subtle {
  --ob-background-strength: 0.35;
}

body.ob-bg-medium {
  --ob-background-strength: 0.55;
}

body.ob-bg-strong {
  --ob-background-strength: 0.85;
}

body.ob-font-default {
  --ob-font-body: var(--ob-font-default);
  --ob-font-title: var(--ob-font-gaming);
}

body.ob-font-serif {
  --ob-font-body: "Merriweather", "Georgia", serif;
  --ob-font-title: var(--ob-font-serif);
}

body.ob-font-gaming {
  --ob-font-body: var(--ob-font-gaming);
  --ob-font-title: var(--ob-font-gaming);
}

body.ob-fluid {
  --ob-layout-width: var(--ob-layout-width-fluid);
}

body.ob-compact {
  --ob-space-3: 10px;
  --ob-space-4: 14px;
  --ob-space-5: 18px;
  --ob-space-6: 24px;
  --ob-space-7: 30px;
}

body.ob-no-shadows {
  --ob-shadow-xs: none;
  --ob-shadow-sm: none;
  --ob-shadow-md: none;
  --ob-shadow-lg: none;
  --ob-glow-soft: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body.ob-no-radius {
  --ob-radius-xs: 0;
  --ob-radius-sm: 0;
  --ob-radius-md: 0;
  --ob-radius-lg: 0;
}

body.ob-no-motion {
  --ob-transition-fast: 0ms;
  --ob-transition-base: 0ms;
  --ob-transition-slow: 0ms;
}

body.ob-contrast {
  --ob-card-border: rgba(255, 255, 255, 0.22);
  --ob-separator: rgba(255, 255, 255, 0.2);
  --ob-text-2: #dce0e9;
  --ob-text-3: #bcc3d1;
}

body.ob-theme-light.ob-contrast {
  --ob-card-border: rgba(25, 35, 56, 0.25);
  --ob-separator: rgba(25, 35, 56, 0.2);
  --ob-text-2: #172134;
  --ob-text-3: #34435c;
}

body.ob-hide-sidebar .ob-sidebar {
  display: none !important;
}

body.ob-hide-icons .forum_status,
body.ob-hide-icons .forumicon,
body.ob-hide-icons .subforumicon,
body.ob-hide-icons .thread_status,
body.ob-hide-icons .thread_status_new,
body.ob-hide-icons .thread_status_dot {
  display: none !important;
}

body.ob-hide-banner #obHeaderBanner {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.ob-no-motion) {
    --ob-transition-fast: 0ms;
    --ob-transition-base: 0ms;
    --ob-transition-slow: 0ms;
  }
}