/* 
ODG · base.css
Design tokens, reset, base element styles, @keyframes, @import. Loaded by EVERY page.
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');
@keyframes odg-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
i[data-lucide], [data-lucide]{
  display: inline-block !important;
  vertical-align: middle !important;
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-right: 6px !important;
  box-shadow: none !important;
}
:root{
  --color-bg-base:       #0D0D0D;
  --color-bg-mid:        #141414;
  --color-bg-dark:       #0a0a0a;
  --color-bg-black:      #080808;
  --color-bg-elevated:   #141414;
  --color-bg-elevated-2: #1a1a1a;
  --color-bg-elevated-3: #111111;
  --color-bg-footer:     #141414;
  --color-text-primary:  #f7f5f1;
  --color-text-muted:    #aaa5a6;
  --color-text-dim:      #77747b;
  --color-text-cream:    #0D0D0D;
  --color-accent-cream:  #f7f6e9;
  --color-accent-cream-dim:#c9bfb3;
  --color-brand-red:     #bc1a1a;
  --color-brand-red-hover:#a81616;
  --color-brand-yellow:  #f1d323;
  --color-brand-red-ink: #ffffff;
  --color-success:       #8fd48a;
  --color-danger:        #e05252;
  --color-danger-strong: #b03a3a;
  --color-border:        #262626;
  --color-border-strong: #333333;
  --color-border-soft:   #202020;

  /* Semantic aliases keep new components consistent while preserving legacy
     tokens already used throughout the app. */
  --color-brand:         var(--color-brand-red);
  --color-accent:        var(--color-brand-yellow);
  --color-black:         #171717;
  --color-surface:       var(--color-bg-elevated);
  --color-surface-muted: var(--color-bg-mid);
  --color-text:          var(--color-text-primary);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-card:    8px;
  --radius-control: 3px;

  --shadow-sm: 0 4px 16px rgba(0,0,0,.08);
  --transition-fast: 150ms ease;

  --content-max:   90rem;
  --container-max: 1100px;
  --container-pad: 64px;
  --section-pad:   96px;

  --font-display: 'Poppins', 'Space Grotesk', Arial, sans-serif;
  --font-body:    'Avenir LT Std', 'Avenir', 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Grotesk', ui-monospace, Menlo, monospace;
}
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;
}
html{
  scroll-behavior:smooth;
  -webkit-tap-highlight-color:transparent;
  tap-highlight-color:transparent;
}
a, button, input, textarea, select, label, [role="button"]{
  -webkit-tap-highlight-color:transparent;
}
body{
  background:var(--color-bg-base);
  color:var(--color-text-primary);
  font-family:var(--font-body);

h1,h2,h3,h4,h5,.set-name,.stat-pill b,.button{font-family:var(--font-display)}
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;
}
a{color:inherit;text-decoration:none;
}
ul, ol{list-style:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;
}
@media (max-width:900px){


/* 16. Responsive ------------------------------------------- */


:root{--container-pad:24px;--section-pad:56px;
  }
}
@keyframes odgPopScrim{from{opacity:0}to{opacity:1}}
@keyframes odgPopLine{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}