/* ============================================================
   pi2pi Design Tokens — v1.0
   2 themes: [data-theme="light"] and [data-theme="dark"]
   Fonts: Inter (UI) + JetBrains Mono (prices, addresses)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ── THEME: SAFE LIGHT ── */
[data-theme="light"] {
  --font-ui:   'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --color-bg-primary:    #FFFFFF;
  --color-bg-secondary:  #F7F8FA;
  --color-bg-card:       #FFFFFF;
  --color-bg-input:      #FFFFFF;
  --color-bg-overlay:    rgba(11,15,26,0.30);

  --color-border:        #E6E8EC;
  --color-border-strong: #D0D3DA;

  --color-text-primary:  #0B0F1A;
  --color-text-secondary:#5B6475;
  --color-text-dim:      #8A93A6;
  --color-text-placeholder: #B8BEC9;

  --color-primary:        #16C784;
  --color-primary-hover:  #13A66C;
  --color-primary-text:   #FFFFFF;
  --color-primary-surface:#E8F8F2;
  --color-primary-border: rgba(22,199,132,0.20);

  --color-warning:        #F59E0B;
  --color-warning-surface:#FFF6E5;
  --color-warning-border: rgba(245,158,11,0.20);

  --color-danger:         #EF4444;
  --color-danger-dark:    #B91C1C;
  --color-danger-surface: #FEECEC;
  --color-danger-border:  rgba(239,68,68,0.18);

  --color-info:           #3B82F6;
  --color-info-surface:   #EAF2FF;
  --color-info-border:    rgba(59,130,246,0.20);

  --state-active:          #16C784;
  --state-active-surface:  #E8F8F2;
  --state-active-border:   rgba(22,199,132,0.20);
  --state-ending:          #F59E0B;
  --state-ending-surface:  #FFF6E5;
  --state-ending-border:   rgba(245,158,11,0.20);
  --state-damage:          #EF4444;
  --state-damage-surface:  #FEECEC;
  --state-damage-border:   rgba(239,68,68,0.18);
  --state-dispute:         #B91C1C;
  --state-dispute-surface: #FEF0F0;
  --state-dispute-border:  rgba(185,28,28,0.20);
  --state-settled:         #9CA3AF;
  --state-settled-surface: #F3F4F6;
  --state-settled-border:  rgba(156,163,175,0.20);
  --state-provisional:     #3B82F6;
  --state-provisional-surface: #EAF2FF;
  --state-provisional-border:  rgba(59,130,246,0.20);

  --btn-primary-bg:     #16C784;
  --btn-primary-text:   #FFFFFF;
  --btn-primary-hover:  #13A66C;
  --btn-secondary-bg:   #F1F3F5;
  --btn-secondary-text: #0B0F1A;
  --btn-secondary-border:#E6E8EC;
  --btn-danger-bg:      #FEECEC;
  --btn-danger-text:    #EF4444;
  --btn-danger-border:  rgba(239,68,68,0.18);
  --btn-disabled-bg:    #F1F3F5;
  --btn-disabled-text:  #B8BEC9;

  --shadow-sm:   0 1px 2px rgba(11,15,26,.04), 0 2px 8px rgba(11,15,26,.06);
  --shadow-md:   0 2px 8px rgba(11,15,26,.06), 0 8px 24px rgba(11,15,26,.08);
  --shadow-lg:   0 4px 16px rgba(11,15,26,.08), 0 16px 48px rgba(11,15,26,.10);
  --shadow-card: 0 1px 2px rgba(11,15,26,.04), 0 2px 8px rgba(11,15,26,.06);

  /* Dropdown glass */
  --color-glass-bg:     rgba(255, 255, 255, 0.75);
  --color-glass-border: rgba(0, 0, 0, 0.08);
  --color-glass-shadow: 0 12px 48px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
  --color-glass-inset:  rgba(255,255,255,0.8);
  --color-glass-divider: rgba(0, 0, 0, 0.06);

  /* wallet balance card always dark — override in component */
  --wallet-card-bg:     #0B0F1A;
  --wallet-card-text:   #FFFFFF;
  --wallet-card-dim:    rgba(255,255,255,0.25);
  --wallet-card-addr:   rgba(255,255,255,0.18);
}

/* ── THEME: TECH DARK ── */
[data-theme="dark"] {
  color-scheme: dark;
  --font-ui:   'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --color-bg-primary:    #05070D;
  --color-bg-secondary:  #0A0F1C;
  --color-bg-card:       #0F1629;
  --color-bg-input:      #0F1629;
  --color-bg-overlay:    rgba(0,0,0,0.60);

  --color-border:        #1C2540;
  --color-border-strong: #2A3560;

  --color-text-primary:  #EAF0FF;
  --color-text-secondary:#7F8AA3;
  --color-text-dim:      #4B5563;
  --color-text-placeholder: #2E3A52;

  --color-primary:        #00FFA3;
  --color-primary-hover:  #00E695;
  --color-primary-text:   #05070D;
  --color-primary-surface:rgba(0,255,163,0.10);
  --color-primary-border: rgba(0,255,163,0.22);

  --color-warning:        #FFC857;
  --color-warning-surface:rgba(255,200,87,0.10);
  --color-warning-border: rgba(255,200,87,0.22);

  --color-danger:         #FF5A5F;
  --color-danger-dark:    #FF2E2E;
  --color-danger-surface: rgba(255,90,95,0.10);
  --color-danger-border:  rgba(255,90,95,0.20);

  --color-info:           #3ABEFF;
  --color-info-surface:   rgba(58,190,255,0.10);
  --color-info-border:    rgba(58,190,255,0.20);

  --state-active:          #00FFA3;
  --state-active-surface:  rgba(0,255,163,0.10);
  --state-active-border:   rgba(0,255,163,0.22);
  --state-ending:          #FFC857;
  --state-ending-surface:  rgba(255,200,87,0.10);
  --state-ending-border:   rgba(255,200,87,0.22);
  --state-damage:          #FF5A5F;
  --state-damage-surface:  rgba(255,90,95,0.10);
  --state-damage-border:   rgba(255,90,95,0.20);
  --state-dispute:         #FF2E2E;
  --state-dispute-surface: rgba(255,46,46,0.10);
  --state-dispute-border:  rgba(255,46,46,0.20);
  --state-settled:         #6B7280;
  --state-settled-surface: rgba(107,114,128,0.08);
  --state-settled-border:  rgba(107,114,128,0.15);
  --state-provisional:     #3ABEFF;
  --state-provisional-surface: rgba(58,190,255,0.10);
  --state-provisional-border:  rgba(58,190,255,0.20);

  --btn-primary-bg:     #00FFA3;
  --btn-primary-text:   #05070D;
  --btn-primary-hover:  #00E695;
  --btn-secondary-bg:   #0F1629;
  --btn-secondary-text: #7F8AA3;
  --btn-secondary-border:#1C2540;
  --btn-danger-bg:      rgba(255,90,95,0.10);
  --btn-danger-text:    #FF5A5F;
  --btn-danger-border:  rgba(255,90,95,0.20);
  --btn-disabled-bg:    #0A0F1C;
  --btn-disabled-text:  #2E3A52;

  --shadow-sm:   0 0 0 1px #1C2540, 0 2px 8px rgba(0,0,0,.30);
  --shadow-md:   0 0 0 1px #1C2540, 0 4px 16px rgba(0,0,0,.40);
  --shadow-lg:   0 0 0 1px #1C2540, 0 8px 40px rgba(0,0,0,.50);
  --shadow-card: 0 0 0 1px #1C2540, 0 2px 8px rgba(0,0,0,.30);

  /* Dropdown glass */
  --color-glass-bg:     rgba(15, 22, 41, 0.55);
  --color-glass-border: rgba(255, 255, 255, 0.10);
  --color-glass-shadow: 0 12px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  --color-glass-inset:  rgba(255,255,255,0.06);
  --color-glass-divider: rgba(255, 255, 255, 0.06);

  /* wallet balance card — same dark style, uses card bg */
  --wallet-card-bg:     #0F1629;
  --wallet-card-text:   #EAF0FF;
  --wallet-card-dim:    #4B5563;
  --wallet-card-addr:   #2E3A52;
}

/* ── SHARED ACROSS BOTH THEMES ── */
:root {
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Typography scale */
  --text-xs:   9px;
  --text-sm:   11px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  28px;
}

/* ── BASE RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── UTILITY CLASSES ── */

/* Mono text */
.mono { font-family: var(--font-mono); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; font-family: var(--font-ui);
  font-weight: 700; border-radius: var(--radius-md);
  transition: var(--transition-fast); padding: 10px 20px;
  font-size: 13px; letter-spacing: -0.1px;
}
.btn-primary  { background: var(--btn-primary-bg);  color: var(--btn-primary-text); }
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-secondary{ background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--btn-secondary-border); }
.btn-danger   { background: var(--btn-danger-bg);   color: var(--btn-danger-text);   border: 1px solid var(--btn-danger-border); }
.btn-disabled,
.btn:disabled { background: var(--btn-disabled-bg); color: var(--btn-disabled-text); cursor: not-allowed; }
.btn-full     { width: 100%; }
.btn-pill     { border-radius: var(--radius-full); }

/* Deal state badge */
.deal-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700; border: 1px solid;
}
.deal-state__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.deal-state--active      { background: var(--state-active-surface);      color: var(--state-active);      border-color: var(--state-active-border); }
.deal-state--active .deal-state__dot      { background: var(--state-active); }
.deal-state--ending      { background: var(--state-ending-surface);      color: var(--state-ending);      border-color: var(--state-ending-border); }
.deal-state--ending .deal-state__dot      { background: var(--state-ending); }
.deal-state--damage      { background: var(--state-damage-surface);      color: var(--state-damage);      border-color: var(--state-damage-border); }
.deal-state--damage .deal-state__dot      { background: var(--state-damage); }
.deal-state--dispute     { background: var(--state-dispute-surface);     color: var(--state-dispute);     border-color: var(--state-dispute-border); }
.deal-state--dispute .deal-state__dot     { background: var(--state-dispute); }
.deal-state--settled     { background: var(--state-settled-surface);     color: var(--state-settled);     border-color: var(--state-settled-border); }
.deal-state--settled .deal-state__dot     { background: var(--state-settled); }
.deal-state--provisional { background: var(--state-provisional-surface); color: var(--state-provisional); border-color: var(--state-provisional-border); }
.deal-state--provisional .deal-state__dot { background: var(--state-provisional); }

/* Card */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Input */
.input {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}
.input:focus { border-color: var(--color-primary); }
.input::placeholder { color: var(--color-text-placeholder); }

/* Section label */
.section-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* Wallet balance card — always dark regardless of theme */
.wallet-card {
  background: var(--wallet-card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}
.wallet-card__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wallet-card-dim);
  margin-bottom: var(--space-2);
}
.wallet-card__amount {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 300;
  color: var(--wallet-card-text);
  letter-spacing: -2px;
  line-height: 1;
}
.wallet-card__address {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--wallet-card-addr);
  word-break: break-all;
  line-height: 1.6;
  margin-top: var(--space-2);
}

/* Price display */
.price {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}
.price--sm  { font-size: 13px; }
.price--md  { font-size: 18px; }
.price--lg  { font-size: 24px; }
.price--xl  { font-size: 30px; font-weight: 300; }
.price__unit { font-family: var(--font-ui); font-size: 11px; font-weight: 400; color: var(--color-text-dim); margin-left: 3px; }

/* Address */
.address {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-dim);
  letter-spacing: -0.2px;
  word-break: break-all;
}

/* Banner (state notification) */
.banner {
  border-radius: var(--radius-md);
  padding: 10px 12px;
  border: 1px solid;
}
.banner--success  { background: var(--color-primary-surface);  border-color: var(--color-primary-border);  color: var(--color-primary); }
.banner--warning  { background: var(--color-warning-surface);  border-color: var(--color-warning-border);  color: var(--color-warning); }
.banner--danger   { background: var(--color-danger-surface);   border-color: var(--color-danger-border);   color: var(--color-danger); }
.banner--info     { background: var(--color-info-surface);     border-color: var(--color-info-border);     color: var(--color-info); }
.banner__title    { font-size: 11px; font-weight: 700; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.banner__body     { font-size: 10px; color: var(--color-text-secondary); line-height: 1.55; }