/* Ozzmo design tokens — shared across Ozzgit themes and custom pages */
:root {
  --ozzmo-red: #FF1E1E;
  --ozzmo-red-deep: #B50F14;
  --ozzmo-red-hover: #ff3a3a;
  --ozzmo-black-pure: #050505;
  --ozzmo-black: #1A1A1A;
  --ozzmo-panel: #2B2B2B;
  --ozzmo-panel-2: #111114;
  --ozzmo-gray-900: #1A1A1A;
  --ozzmo-gray-800: #2B2B2B;
  --ozzmo-gray-500: #6C6C6C;
  --ozzmo-silver: #C9C9C9;
  --ozzmo-white: #FFFFFF;
  --ozzmo-glow: 0 0 18px rgba(255, 30, 30, 0.55);
  --ozzmo-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --ozzmo-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ozzmo-border: rgba(255, 255, 255, 0.1);
  --ozzmo-body: rgba(255, 255, 255, 0.78);

  --ozzmo-font-head: "Space Grotesk", "Montserrat", "Inter", Arial, sans-serif;
  --ozzmo-font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --ozzmo-h1-size: 48px;
  --ozzmo-h1-line: 56px;
  --ozzmo-h1-spacing: -0.5px;
  --ozzmo-h2-size: 28px;
  --ozzmo-h2-line: 36px;
  --ozzmo-body-size: 16px;
  --ozzmo-body-line: 24px;
  --ozzmo-label-size: 12px;
  --ozzmo-label-line: 16px;
  --ozzmo-label-spacing: 1.5px;
  --ozzmo-badge-size: 11px;
  --ozzmo-badge-line: 14px;
  --ozzmo-badge-spacing: 0.5px;

  --ozzmo-radius-sm: 4px;
  --ozzmo-radius-md: 8px;
  --ozzmo-radius-lg: 12px;
  --ozzmo-radius-xl: 16px;
  --ozzmo-radius-2xl: 24px;
}

.ozzmo-card {
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid var(--ozzmo-border);
  border-top: 1px solid rgba(255, 30, 30, 0.42);
  border-radius: var(--ozzmo-radius-lg);
  padding: 22px;
  box-shadow: var(--ozzmo-shadow-2);
}

.ozzmo-badge {
  border: 1px solid rgba(255, 30, 30, 0.65);
  border-radius: 10px;
  padding: 12px 18px;
  background: rgba(255, 30, 30, 0.045);
  color: var(--ozzmo-white);
  font-family: var(--ozzmo-font-body);
  font-size: var(--ozzmo-badge-size);
  line-height: var(--ozzmo-badge-line);
  letter-spacing: var(--ozzmo-badge-spacing);
  font-weight: 600;
  text-transform: uppercase;
}

.ozzmo-btn-primary {
  background: var(--ozzmo-red);
  color: var(--ozzmo-white);
  border: none;
  border-radius: var(--ozzmo-radius-md);
  padding: 10px 18px;
  font-weight: 600;
}

.ozzmo-btn-primary:hover {
  background: var(--ozzmo-red-hover);
  box-shadow: var(--ozzmo-glow);
}

.ozzmo-btn-primary:active {
  background: var(--ozzmo-red-deep);
}