/* ==========================================================================
   RIPPLE CAPITAL — SHARED DESIGN SYSTEM
   Design tokens, reset, and cross-page primitives.
   Every page-specific stylesheet builds on these variables so the whole
   application reads as one coherent product.
   ========================================================================== */

:root {
  /* Brand */
  --navy-950: #05070f;
  --navy-900: #0a0f1e;
  --navy-800: #101a30;
  --navy-700: #16223f;
  --navy-600: #1e2c4f;

  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-light: #eff6ff;

  --gold-600: #b8860b;
  --gold-500: #d4af37;
  --gold-light: #fdf8ec;

  /* Semantic */
  --success-700: #15803d;
  --success-600: #16a34a;
  --success-light: #ecfdf3;

  --danger-700: #b91c1c;
  --danger-600: #dc2626;
  --danger-light: #fef2f2;

  --warning-700: #b45309;
  --warning-600: #d97706;
  --warning-light: #fffbeb;

  --info-700: #0369a1;
  --info-600: #0284c7;
  --info-light: #f0f9ff;

  /* Neutrals */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #ffffff;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.16);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.25);

  /* Motion */
  --ease: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Type */
  --font-sans:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font-family: inherit;
}

a {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: var(--shadow-focus) solid 3px;
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Wide tables scroll horizontally instead of breaking layout */
.voucher-table-wrapper,
.table-responsive,
.accounts-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
  body {
    font-size: 15px;
  }
}

/* ==========================================================================
   SHARED NAV (fallback, used only where main-nav markup is present)
   ========================================================================== */

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  background-color: var(--navy-900);
}

.main-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.main-nav a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   SHARED SCROLLBAR STYLE
   ========================================================================== */

.scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--slate-300) transparent;
}

.scroll-thin::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: var(--radius-full);
}