/*
 * BOLD PREDICTION MARKET DESIGN SYSTEM
 * Terminal Confidence Aesthetic
 */

/* Import distinctive fonts */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;600;700&family=DM+Sans:wght@400;500;700;900&display=swap');

/* ============================================
   WEBAWESOME THEME CUSTOMIZATION
   Override WebAwesome design tokens to match
   our bold "Terminal Confidence" aesthetic
   ============================================ */

:root {
  /* COLORS - WebAwesome Overrides */

  /* Brand colors (primary accent) */
  --wa-color-brand-50: #E6FEFF;
  --wa-color-brand-100: #CCFCFF;
  --wa-color-brand-200: #99F9FF;
  --wa-color-brand-300: #66F6FF;
  --wa-color-brand-400: #33F3FF;
  --wa-color-brand-500: #00F0FF; /* Electric blue - our primary */
  --wa-color-brand-600: #00C0CC;
  --wa-color-brand-700: #009099;
  --wa-color-brand-800: #006066;
  --wa-color-brand-900: #003033;

  /* Success colors (lime) */
  --wa-color-success-50: #F7FFE6;
  --wa-color-success-100: #EFFFCC;
  --wa-color-success-200: #DFFF99;
  --wa-color-success-300: #D6FF66;
  --wa-color-success-400: #D1FF33;
  --wa-color-success-500: #CCFF00; /* Lime - our success */
  --wa-color-success-600: #A3CC00;
  --wa-color-success-700: #7A9900;
  --wa-color-success-800: #526600;
  --wa-color-success-900: #293300;

  /* Danger/Warning colors (hot pink) */
  --wa-color-danger-50: #FFE6F3;
  --wa-color-danger-100: #FFCCE6;
  --wa-color-danger-200: #FF99CD;
  --wa-color-danger-300: #FF66B5;
  --wa-color-danger-400: #FF339C;
  --wa-color-danger-500: #FF006E; /* Hot pink - our danger */
  --wa-color-danger-600: #CC0058;
  --wa-color-danger-700: #990042;
  --wa-color-danger-800: #66002C;
  --wa-color-danger-900: #330016;

  --wa-color-warning-500: #FF006E; /* Use hot pink for warnings too */

  /* Neutral colors (grays) */
  --wa-color-neutral-50: #F5F5F5;
  --wa-color-neutral-100: #E0E0E0;
  --wa-color-neutral-200: #C2C2C2;
  --wa-color-neutral-300: #A3A3A3;
  --wa-color-neutral-400: #858585;
  --wa-color-neutral-500: #666666;
  --wa-color-neutral-600: #525252;
  --wa-color-neutral-700: #404040;
  --wa-color-neutral-800: #1A1A1A;
  --wa-color-neutral-900: #0A0A0A;
  --wa-color-neutral-950: #000000;

  /* Surface colors */
  --wa-color-surface-raised: #1A1A1A;
  --wa-color-surface-default: #0A0A0A;
  --wa-color-surface-lowered: #000000;
  --wa-color-surface-border: #404040;

  /* Surface numbered system (alternative) */
  --wa-color-surface-1: #000000;
  --wa-color-surface-2: #0A0A0A;
  --wa-color-surface-3: #1A1A1A;

  /* Border colors */
  --wa-color-border-subtle: #404040;
  --wa-color-border-normal: #666666;
  --wa-color-border-strong: #FFFFFF;

  /* Text colors */
  --wa-color-text-normal: #FFFFFF;
  --wa-color-text-quiet: #E0E0E0;
  --wa-color-text-link: #00F0FF;

  /* Overlay colors */
  --wa-color-overlay-modal: rgba(0, 0, 0, 0.95);
  --wa-color-overlay-inline: rgba(0, 0, 0, 0.8);
  --wa-color-shadow: rgba(0, 240, 255, 0.3);
  --wa-color-focus: #00F0FF;

  /* TYPOGRAPHY - WebAwesome Overrides */

  --wa-font-family-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --wa-font-family-heading: 'Archivo Black', sans-serif;
  --wa-font-family-code: 'IBM Plex Mono', 'Courier New', monospace;

  --wa-font-weight-body: 500;
  --wa-font-weight-heading: 900;
  --wa-font-weight-code: 600;
  --wa-font-weight-action: 700;

  --wa-line-height-condensed: 1.1;
  --wa-line-height-normal: 1.5;
  --wa-line-height-expanded: 1.8;

  /* BORDERS - WebAwesome Overrides (Brutalist style) */

  --wa-border-width-s: 0.125rem; /* 2px */
  --wa-border-width-m: 0.1875rem; /* 3px */
  --wa-border-width-l: 0.25rem; /* 4px */

  /* Remove border radius for brutalist aesthetic */
  --wa-border-radius-s: 0px;
  --wa-border-radius-m: 0px;
  --wa-border-radius-l: 0px;
  --wa-border-radius-square: 0px;

  /* TRANSITIONS - WebAwesome Overrides */

  --wa-transition-speed-fast: 150ms;
  --wa-transition-speed-medium: 300ms;
  --wa-transition-speed-slow: 500ms;
  --wa-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Color System - Bold & High Contrast */
:root {
  /* Brand Colors - Electric & Bold */
  --color-electric: #00F0FF;
  --color-hot-pink: #FF006E;
  --color-lime: #CCFF00;
  --color-violet: #7B2EFF;

  /* Core Palette */
  --color-black: #000000;
  --color-near-black: #0A0A0A;
  --color-white: #FFFFFF;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E0E0E0;
  --color-gray-700: #404040;
  --color-gray-800: #1A1A1A;

  /* Semantic Colors */
  --color-success: var(--color-lime);
  --color-danger: var(--color-hot-pink);
  --color-primary: var(--color-electric);

  /* Typography */
  --font-display: 'Archivo Black', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset */
* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  height: 100dvh;
  padding: 0;
  margin: 0;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  padding: 0;
}

/* Typography System */
.text-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.text-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Utility Classes */
.bold-card {
  background: var(--color-near-black);
  border: 3px solid var(--color-white);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.bold-card:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 var(--color-electric);
}

/* Probability Display - Hero Element */
.probability-hero {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 15vw, 10rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-violet) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 40px rgba(0, 240, 255, 0.3);
}

/* Color Block Sections */
.color-block {
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.color-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 4px
    );
  pointer-events: none;
}

/* Animation System */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-in {
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-count {
  animation: countUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stagger delays for sequential animations */
.animate-delay-1 { animation-delay: 100ms; }
.animate-delay-2 { animation-delay: 200ms; }
.animate-delay-3 { animation-delay: 300ms; }
.animate-delay-4 { animation-delay: 400ms; }

/* Bold Button Style */
.btn-bold {
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 2rem;
  background: var(--color-white);
  color: var(--color-black);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 4px 4px 0 var(--color-electric);
}

.btn-bold:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-electric);
}

.btn-bold:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--color-electric);
}

/* ============================================
   WEBAWESOME COMPONENT OVERRIDES
   Style WebAwesome components to match
   our bold Terminal Confidence aesthetic
   ============================================ */

/* Buttons - Bold, high contrast */
wa-button::part(base) {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-width: 3px;
  border-radius: 0;
  padding: 1.25rem 2rem;
  min-height: 3.5rem;
  font-size: 1rem;
  transition: all var(--transition-base);
}

wa-button[variant="primary"]::part(base) {
  background: var(--color-electric);
  color: var(--color-black);
  border-color: var(--color-white);
  box-shadow: 4px 4px 0 var(--color-violet);
}

wa-button[variant="primary"]::part(base):hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-violet);
}

wa-button[variant="primary"]::part(base):active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--color-violet);
}

wa-button[variant="outline"]::part(base) {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-electric);
}

wa-button[variant="outline"]::part(base):hover {
  background: var(--color-electric);
  color: var(--color-black);
}

/* Inputs - Terminal style */
wa-input,
wa-select {
  display: block;
}

wa-input::part(form-control),
wa-select::part(form-control) {
  overflow: visible;
}

wa-input::part(base),
wa-select::part(base) {
  font-family: var(--font-mono);
  font-weight: 600;
  border-width: 3px;
  border-radius: 0;
  background: var(--color-near-black);
  border-color: var(--color-gray-700);
  color: var(--color-white);
  overflow: visible;
}

wa-input::part(base):focus,
wa-select::part(base):focus {
  border-color: var(--color-electric);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.2);
}

wa-input::part(input),
wa-select::part(control) {
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  height: 3.5rem;
}

wa-input::part(label),
wa-select::part(label) {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  color: var(--color-gray-200);
  margin-bottom: 0.5rem;
}

/* Select dropdown styling */
wa-select::part(listbox) {
  background: var(--color-near-black);
  border: 3px solid var(--color-electric);
  border-radius: 0;
  padding: 0;
}

wa-option::part(base) {
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 1rem 1.25rem;
  color: var(--color-white);
  background: var(--color-near-black);
  border: none;
}

wa-option::part(base):hover,
wa-option[aria-selected="true"]::part(base),
wa-option[current]::part(base) {
  background: var(--color-electric) !important;
  color: var(--color-black) !important;
}

wa-option::part(label) {
  color: inherit;
}

wa-option[aria-selected="true"]::part(label),
wa-option[current]::part(label),
wa-option:hover::part(label) {
  color: var(--color-black) !important;
}

wa-option::part(checked-icon) {
  color: var(--color-black) !important;
}

/* Radio buttons - Bold toggle style */
wa-radio-group {
  gap: 0;
  width: 100%;
}

wa-radio[appearance="button"] {
  flex: 1;
}

wa-radio[appearance="button"]::part(base) {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-width: 3px;
  border-radius: 0;
  background: var(--color-near-black);
  color: var(--color-gray-200);
  padding: 1.25rem 2rem;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  width: 100%;
}

wa-radio[appearance="button"][checked]::part(base) {
  background: var(--color-electric);
  color: var(--color-black);
  border-color: var(--color-white);
}

/* Badges - Terminal data display */
wa-badge::part(base) {
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: 0;
  border: 2px solid currentColor;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

wa-badge[variant="success"]::part(base) {
  background: var(--color-lime);
  color: var(--color-black);
}

wa-badge[variant="danger"]::part(base) {
  background: var(--color-hot-pink);
  color: var(--color-white);
}

wa-badge[variant="neutral"]::part(base) {
  background: var(--color-gray-800);
  color: var(--color-gray-200);
  border-color: var(--color-gray-700);
}

/* Drawers - Full dark background */
wa-drawer::part(overlay) {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(4px);
}

wa-drawer::part(panel) {
  background: var(--color-black);
  border: 3px solid var(--color-electric);
  border-radius: 0;
}

wa-drawer::part(header) {
  border-bottom: 3px solid var(--color-gray-800);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-near-black);
}

wa-drawer::part(title) {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

wa-drawer::part(body) {
  padding: var(--space-lg);
  background: var(--color-black);
  overflow-y: auto;
  max-height: calc(90vh - 4rem);
}

/* Cards - Bold borders */
wa-card::part(base) {
  background: var(--color-near-black);
  border: 3px solid var(--color-gray-800);
  border-radius: 0;
  box-shadow: none;
}

/* Icons - Consistent sizing */
wa-icon {
  color: currentColor;
}

/* Copy button - Match our style */
wa-copy-button::part(base) {
  background: transparent;
  border: 2px solid var(--color-gray-700);
  border-radius: 0;
  color: var(--color-gray-200);
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: all var(--transition-fast);
}

wa-copy-button::part(base):hover {
  border-color: var(--color-electric);
  color: var(--color-electric);
}

/* Callouts - Bold alerts */
wa-callout::part(base) {
  border-width: 3px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--color-near-black);
}

wa-callout[variant="danger"]::part(base) {
  border-color: var(--color-hot-pink);
  background: rgba(255, 0, 110, 0.1);
  color: var(--color-hot-pink);
}