/* Sovereign Design System — CSS Cascade Layers */
@layer reset, tokens, base, components, utilities;

/* ─────────────────────────────────────────────
   @layer tokens — Design tokens / CSS custom properties
   ───────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Typography */
    --mono: 'JetBrains Mono', monospace;
    --sans: 'DM Sans', -apple-system, sans-serif;

    /* Backgrounds */
    --bg: #08080d;
    --surface: rgba(255, 255, 255, 0.025);
    --surface2: rgba(255, 255, 255, 0.05);

    /* Border */
    --border: rgba(255, 255, 255, 0.06);

    /* Text scale */
    --text: #e0e0e0;
    --text2: #999;
    --text3: #555;
    --text4: #333;

    /* Semantic colors */
    --green: #22c55e;
    --red: #ef4444;
    --blue: #3b82f6;
    --purple: #a78bfa;
    --accent: #8b5cf6;
    --accent2: #6366f1;
    --yellow: #eab308;
    --orange: #f97316;
    --cyan: #22d3ee;
    --pink: #ec4899;
    --btc: #f7931a;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Transitions */
    --ease-fast: 0.15s ease;
    --ease-normal: 0.25s ease;

    /* Shadows / Glow */
    --glow: 0 0 40px rgba(139, 92, 246, 0.08);
  }
}

/* ─────────────────────────────────────────────
   @layer reset — Baseline normalization
   ───────────────────────────────────────────── */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

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

  * {
    scrollbar-width: none;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────────
   @layer base — Element defaults
   ───────────────────────────────────────────── */
@layer base {
  /* Layout — main content offset for fixed sidebar */
  .sov-main {
    padding: var(--space-lg);
    min-height: 100vh;
  }

  @media (min-width: 768px) {
    .sov-main {
      margin-left: 220px;
    }
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  button {
    font-family: var(--sans);
    border: none;
    cursor: pointer;
    background: transparent;
  }

  input,
  textarea {
    font-family: var(--sans);
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
  }

  input:focus,
  textarea:focus {
    outline: none;
    border-color: var(--accent);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--mono);
    font-weight: 700;
    color: #fff;
  }
}

/* ─────────────────────────────────────────────
   @layer components — Component styles
   ───────────────────────────────────────────── */
@layer components {
  /* Component styles imported via @layer components in separate files */
}

/* ─────────────────────────────────────────────
   @layer utilities — Utility classes
   ───────────────────────────────────────────── */
@layer utilities {
  /* Accessibility */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Flex utilities */
  .flex {
    display: flex;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Gap utilities */
  .gap-sm {
    gap: var(--space-sm);
  }

  .gap-md {
    gap: var(--space-md);
  }

  .gap-lg {
    gap: var(--space-lg);
  }

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

  .text-green  { color: var(--green);  }
  .text-red    { color: var(--red);    }
  .text-blue   { color: var(--blue);   }
  .text-purple { color: var(--purple); }
  .text-accent { color: var(--accent); }
  .text-yellow { color: var(--yellow); }
  .text-orange { color: var(--orange); }
  .text-cyan   { color: var(--cyan);   }
  .text-pink   { color: var(--pink);   }
  .text-btc    { color: var(--btc);    }

  /* Text overflow */
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Loading spinner ─────────────────────────────────────────────────── */
  .sov-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text2);
    font-size: 0.875rem;
  }

  .sov-loading::before {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin-right: 0.5rem;
    animation: sov-spin 0.8s linear infinite;
  }

  /* ── Empty state ─────────────────────────────────────────────────────── */
  .sov-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text2);
    font-size: 0.875rem;
  }

  /* ── Error banner ────────────────────────────────────────────────────── */
  .sov-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  /* ── Mobile UX ───────────────────────────────────────────────────────── */
  @media (max-width: 768px) {
    button,
    a,
    [role="button"],
    input[type="submit"] {
      min-height: 44px;
      min-width: 44px;
    }

    /* Admin tables: horizontal scroll on narrow screens */
    .admin-table-wrap {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Prevent page-level horizontal scroll */
    .sov-main {
      overflow-x: hidden;
    }
  }
}

/* ─────────────────────────────────────────────
   Animations
   ───────────────────────────────────────────── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1);   }
}

@keyframes sov-spin {
  to { transform: rotate(360deg); }
}