/**
 * Silicon Network design tokens — source: Silicon Network Design Specification §1.2
 * Link as the first stylesheet on every subdomain: cdn.silicon.net/tokens.css
 *
 * Canonical Inter + JetBrains Mono (400/500) are loaded via @import (self-hosted WOFF2).
 */
@import url('./fonts/silicon-fonts.css');

:root {
  /* Backgrounds */
  --si-bg-primary:     #FFFFFF;   /* Cards, topbar, footer, modals */
  --si-bg-secondary:   #F7F7F5;   /* Page background, switcher group, stat cards */
  --si-bg-tertiary:    #EFEDE8;   /* Subtle divider fills, skeleton loaders */

  /* Text */
  --si-text-primary:   #111111;   /* Headings, active nav, primary labels */
  --si-text-secondary: #666660;   /* Body copy, inactive nav links */
  --si-text-tertiary:  #AAAAAA;   /* Hints, placeholders, footer text */
  --si-text-inverse:   #FFFFFF;   /* Text on dark fills (CTA buttons) */

  /* Borders */
  --si-border-subtle:  rgba(0, 0, 0, 0.08);   /* Resting state borders */
  --si-border-default: rgba(0, 0, 0, 0.14);   /* Default component borders */
  --si-border-strong:  rgba(0, 0, 0, 0.24);   /* Hover/focus borders */

  /* Semantic */
  --si-success:        #1D9E75;   /* Positive returns, live indicators */
  --si-success-bg:     #E1F5EE;   /* Success chip backgrounds */
  --si-warning:        #BA7517;   /* Caution states */
  --si-warning-bg:     #FAEEDA;   /* Warning chip backgrounds */
  --si-danger:         #A32D2D;   /* Errors, negative returns */
  --si-danger-bg:      #FCEBEB;   /* Error chip backgrounds */
  --si-info:           #185FA5;   /* Informational states */
  --si-info-bg:        #E6F1FB;   /* Info chip backgrounds */

  /* Brand accent (used sparingly — active states, primary CTAs) */
  --si-accent:         #111111;   /* Black-on-white primary actions */

  /* Grayscale palette (silicon.net gold standard) */
  --si-gray-50:  #FAFAFA;
  --si-gray-100: #F0EFE8;
  --si-gray-200: #D0D0D0;
  --si-gray-300: #A7A7A7;
  --si-gray-400: #7D7D7D;
  --si-gray-500: #5A5A5A;
  --si-gray-600: #454545;
  --si-gray-700: #363636;
  --si-gray-800: #252525;
  --si-gray-900: #141414;

  /* Wasabi (brand green) palette */
  --si-wasabi-50:  #F6FBE7;
  --si-wasabi-100: #EEF8D0;
  --si-wasabi-200: #DCF0A1;
  --si-wasabi-300: #CBE971;
  --si-wasabi-400: #B9E142;
  --si-wasabi-500: #A2D212;
  --si-wasabi-600: #86AE0F;
  --si-wasabi-700: #65830B;
  --si-wasabi-800: #435708;
  --si-wasabi-900: #222C04;

  /* Typography */
  --si-font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --si-font-mono:      'Geist Mono', 'Fira Code', monospace;

  /* Font weights — capped at 500 for Inter's clean look */
  --si-font-weight-normal:   400;
  --si-font-weight-medium:   500;
  --si-font-weight-semibold: 500;
  --si-font-weight-bold:     500;

  /* Spacing scale */
  --si-space-1:  4px;
  --si-space-2:  8px;
  --si-space-3:  12px;
  --si-space-4:  16px;
  --si-space-5:  20px;
  --si-space-6:  24px;
  --si-space-8:  32px;
  --si-space-10: 40px;
  --si-space-12: 48px;

  /* Border radius */
  --si-radius-sm:   4px;    /* Tags, small badges */
  --si-radius-md:   8px;    /* Inputs, switcher pills, small cards */
  --si-radius-lg:   12px;   /* Cards, panels */
  --si-radius-xl:   16px;   /* Large panels */
  --si-radius-pill: 9999px; /* CTA buttons, status chips */

  /* Transitions */
  --si-transition-fast: 120ms ease;
  --si-transition-base: 200ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --si-bg-primary:     #0f0f0f;
    --si-bg-secondary:   #1E1D1C;
    --si-bg-tertiary:    #282725;
    --si-text-primary:   #F0EFE8;
    --si-text-secondary: #9C9A90;
    --si-text-tertiary:  #666660;
    --si-text-inverse:   #111111;
    --si-border-subtle:  rgba(255, 255, 255, 0.06);
    --si-border-default: rgba(255, 255, 255, 0.12);
    --si-border-strong:  rgba(255, 255, 255, 0.22);
    --si-success:        #2DC78F;
    --si-success-bg:     #0A2E21;
    --si-warning:        #E8A830;
    --si-warning-bg:     #2A1F08;
    --si-danger:         #E05252;
    --si-danger-bg:      #2A0F0F;
    --si-info:           #5B9BD6;
    --si-info-bg:        #0A1929;
    --si-accent:         #F0EFE8;
  }
}

/**
 * Class-based dark (Tailwind `darkMode: 'class'`, e.g. `<html class="dark">`).
 * Same `--si-*` values as `prefers-color-scheme: dark`, so apps that force dark
 * UI while the OS theme is light still get the canonical dark token set (SHR-003).
 */
:root.dark,
html.dark,
.dark {
  --si-bg-primary:     #0f0f0f;
  --si-bg-secondary:   #1E1D1C;
  --si-bg-tertiary:    #282725;
  --si-text-primary:   #F0EFE8;
  --si-text-secondary: #9C9A90;
  --si-text-tertiary:  #666660;
  --si-text-inverse:   #111111;
  --si-border-subtle:  rgba(255, 255, 255, 0.06);
  --si-border-default: rgba(255, 255, 255, 0.12);
  --si-border-strong:  rgba(255, 255, 255, 0.22);
  --si-success:        #2DC78F;
  --si-success-bg:     #0A2E21;
  --si-warning:        #E8A830;
  --si-warning-bg:     #2A1F08;
  --si-danger:         #E05252;
  --si-danger-bg:      #2A0F0F;
  --si-info:           #5B9BD6;
  --si-info-bg:        #0A1929;
  --si-accent:         #F0EFE8;
}

:root.dark,
html.dark {
  color-scheme: dark;
}

/* §1.6 component placeholders — reserve height before JS registers web components */
silicon-topbar:not(:defined) {
  display: block;
  height: 46px;
  background: var(--si-bg-primary);
  border-bottom: 0.5px solid var(--si-border-subtle);
}
silicon-topbar[size="lg"]:not(:defined) {
  height: 64px;
}

silicon-footer {
  display: block;
}

/* §1.6b — shared base styles (SHR-013) — selection, scrollbar, body defaults */
::selection {
  background-color: #ABD726;
  color: white;
}

::-moz-selection {
  background-color: #ABD726;
  color: white;
}

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* §1.7 shared footer strip (SHR-008) — load via tokens.css on every public surface */
.si-footer {
  display: flex;
  align-items: center;
  padding: 12px var(--si-space-4);
  border-top: 0.5px solid var(--si-border-default);
  background: var(--si-bg-primary);
}

.si-footer-wordmark {
  font-size: 13px;
  font-weight: 500;
  color: var(--si-text-secondary);
  text-decoration: none;
  flex-shrink: 0;
}

.si-footer-links {
  display: flex;
  align-items: center;
  gap: var(--si-space-4);
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.si-footer-link {
  font-size: 11px;
  color: var(--si-text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--si-transition-fast);
}

.si-footer-link:hover {
  color: var(--si-text-secondary);
}

.si-footer-copy {
  font-size: 11px;
  color: var(--si-text-tertiary);
  white-space: nowrap;
}

/**
 * §1.9 — shared buttons + tabular figures (SHR-011)
 * Use on static HTML, embeds, and as reference for Tailwind-mapped components.
 */
.si-tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ── Shared button base ───────────────────────────────────────────────── */
.si-btn-primary,
.si-btn-secondary,
.si-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--si-space-2);
  font-family: var(--si-font-mono);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--si-radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--si-transition-fast),
              color var(--si-transition-fast),
              border-color var(--si-transition-fast),
              opacity var(--si-transition-fast),
              transform var(--si-transition-fast);
}

/* ── Primary: solid accent fill ──────────────────────────────────────── */
.si-btn-primary {
  color: var(--si-text-inverse);
  background: var(--si-accent);
  border: 1px solid var(--si-accent);
}
.si-btn-primary:hover { opacity: 0.88; }

/* ── Secondary: outlined, muted ──────────────────────────────────────── */
.si-btn-secondary {
  color: var(--si-text-primary);
  background: transparent;
  border: 1px solid var(--si-border-strong);
}
.si-btn-secondary:hover {
  background: var(--si-bg-secondary);
  border-color: var(--si-text-tertiary);
}

/* ── Ghost: text-only, no chrome ─────────────────────────────────────── */
.si-btn-ghost {
  color: var(--si-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  padding: 10px 12px;
}
.si-btn-ghost:hover { color: var(--si-text-primary); }

/* ── Shared states ───────────────────────────────────────────────────── */
.si-btn-primary:active,
.si-btn-secondary:active { transform: scale(0.98); }

.si-btn-primary:disabled,
.si-btn-primary[disabled],
.si-btn-secondary:disabled,
.si-btn-secondary[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.si-btn-primary:focus-visible,
.si-btn-secondary:focus-visible,
.si-btn-ghost:focus-visible {
  outline: 2px solid var(--si-accent);
  outline-offset: 2px;
}

/* ── Size variants ───────────────────────────────────────────────────── */
.si-btn--sm {
  font-size: 13px;
  padding: 7px 16px;
  border-radius: var(--si-radius-pill);  /* topbar / compact */
}
.si-btn--lg {
  font-size: 15px;
  padding: 14px 24px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Metallic shimmer — cycling gradient + chrome edges ───────────────── */
.si-shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    108deg,
    #B8BCC8 0%,
    #EDEEF4 12%,
    #A8ACBC 24%,
    #FFFFFF 38%,
    #B0B4C4 50%,
    #F0F2F8 62%,
    #C0C4D0 76%,
    #FFFFFF 88%,
    #C8CCD8 100%
  ) !important;
  background-size: 300% 100% !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: si-metallic-shimmer 1s ease-in-out infinite;
}

.si-shimmer:hover {
  animation-duration: 1.5s;
}

.si-shimmer {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--si-font-mono);
  font-weight: 500;
}

@keyframes si-metallic-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Large-surface metallic — for cards/panels (pool, predeposit deposit cards) */
.si-shimmer-surface {
  background: linear-gradient(180deg, #FAFBFF 0%, #E4E7F5 25%, #D9DCEA 50%, #CCCFDD 75%, #B8BBC9 100%);
  box-shadow:
    inset 2px 2px 6px rgba(255, 255, 255, 0.5),
    inset -2px -2px 6px rgba(0, 0, 0, 0.12),
    0 1px 4px rgba(0, 0, 0, 0.2);
  animation: si-surface-breathe 8s ease-in-out infinite;
}

@keyframes si-surface-breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.03); }
}

/* §1.10 / SHR-012 — decorative transitions respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .si-footer-link,
  .si-footer-wordmark,
  .si-btn-primary,
  .si-btn-secondary,
  .si-btn-ghost,
  .si-shimmer {
    transition: none !important;
    animation: none !important;
  }
  .si-btn-primary:active,
  .si-btn-secondary:active {
    transform: none !important;
  }
}