/* ================================================================
   PayFusion — Design System
   Single source of truth for every design token used across the
   platform. Load this BEFORE any page-specific stylesheet.

   Page stylesheets should no longer declare their own :root block —
   they consume the tokens defined here. Old per-page variable
   aliases (--font-d, --inv-muted, --adm-muted, etc.) are kept below
   so existing CSS keeps working unchanged while everything resolves
   to one canonical value.

   Breakpoint scale used across the platform (documented, not a CSS
   variable — media queries can't consume custom properties):
     1024px  — sidebar / multi-column layouts collapse
     768px   — tablet / stacked layouts
     480px   — small phone
================================================================ */

:root {
    /* ── Brand ── */
    --brand:        #00c896;
    --brand-d:      #00a87e;
    --brand-glow:   rgba(0,200,150,0.2);

    /* ── Surfaces (dark theme) ── */
    --dark:         #060d1a;   /* page background */
    --dark-2:       #0d1a2e;   /* card / sidebar background */
    --dark-3:       #132038;   /* input / nested surface */
    --dark-4:       #1a2a40;   /* hover / raised surface */

    /* ── Text ── */
    --text:         #e2eaf6;
    --muted:        #7a93b8;

    /* ── Borders ── */
    --border:       rgba(255,255,255,0.08);
    --border-focus: rgba(0,200,150,0.5);

    /* ── Semantic ── */
    --success:      #00c896;
    --success-bg:   rgba(0,200,150,0.12);
    --warning:      #fb923c;
    --warning-bg:   rgba(251,146,60,0.15);
    --danger:       #f87171;
    --danger-bg:    rgba(239,68,68,0.12);
    --info:         #60a5fa;
    --info-bg:      rgba(59,130,246,0.15);
    --purple:       #a78bfa;
    --purple-bg:    rgba(167,139,250,0.15);

    /* ── Typography ── */
    --font-display: 'Syne', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --font-mono:    'SF Mono', 'Fira Code', monospace;

    /* ── Radius scale ── */
    --radius-xs:    4px;
    --radius-sm:    8px;
    --radius:       12px;   /* default card radius */
    --radius-lg:    20px;   /* hero / auth panels */
    --radius-pill:  999px;

    /* ── Spacing scale (4px base) ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.28);
    --shadow-lg: 0 40px 80px rgba(0,0,0,0.4);

    /* ── Layout ── */
    --sidebar-w:  256px;
    --topbar-h:   64px;

    /* ── Motion ── */
    --transition: .2s ease;

    /* ── Legacy aliases (kept so existing page CSS resolves correctly) ── */
    --font-d:      var(--font-display);
    --font-b:      var(--font-body);
    --text-muted:  var(--muted);
    --inv-muted:   var(--muted);
    --adm-muted:   var(--muted);
}

/* ================================================================
   Reset & base
================================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

::selection {
    background: var(--brand);
    color: var(--dark);
}

/* Custom scrollbar (WebKit) — matches dark surfaces everywhere */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--dark-4);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ================================================================
   Accessibility
================================================================ */

/* Visible keyboard focus everywhere, even on elements that don't
   define their own focus state */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

a, button, input, select, textarea { outline-color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================
   Shared components
   Namespaced as .ds-* so they never collide with existing per-page
   classes (.ak-btn, .gw-card, etc). Use these for any new UI so the
   platform converges on one component set over time.
================================================================ */

/* Buttons */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; font-family: var(--font-body); font-size: 14px; font-weight: 600;
    padding: 10px 18px; border-radius: var(--radius-xs);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: background var(--transition), border-color var(--transition), transform var(--transition), color var(--transition);
    white-space: nowrap; line-height: 1;
}
.ds-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.ds-btn-sm   { font-size: 12px; padding: 6px 12px; }
.ds-btn-lg   { font-size: 15px; padding: 13px 24px; }
.ds-btn-primary { background: var(--brand); color: var(--dark); }
.ds-btn-primary:hover:not(:disabled) { background: var(--brand-d); transform: translateY(-1px); }
.ds-btn-outline { background: transparent; border-color: var(--border); color: var(--muted); }
.ds-btn-outline:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.ds-btn-ghost { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--muted); }
.ds-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.09); color: var(--text); }
.ds-btn-danger { background: var(--danger-bg); border-color: rgba(239,68,68,0.25); color: var(--danger); }
.ds-btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.22); }

/* Form fields */
.ds-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--space-4); }
.ds-field label { font-size: 13px; font-weight: 600; color: var(--text); }
.ds-field small { font-size: 12px; color: var(--muted); }
.ds-input, .ds-select, .ds-textarea {
    width: 100%; background: var(--dark-3); border: 1.5px solid var(--border);
    border-radius: var(--radius-xs); padding: 11px 13px; font-family: var(--font-body);
    font-size: 14px; color: var(--text); outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
    border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--muted); opacity: .6; }
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { opacity: .45; cursor: not-allowed; }

/* Cards */
.ds-card {
    background: var(--dark-2); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.ds-card-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px; border-bottom: 1px solid var(--border);
}
.ds-card-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.ds-card-body { padding: 20px; }
.ds-card:hover { border-color: rgba(0,200,150,0.25); }

/* Badges / status pills */
.ds-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    padding: 4px 10px; border-radius: var(--radius-pill); line-height: 1.4;
}
.ds-badge-success { background: var(--success-bg); color: var(--success); }
.ds-badge-warning { background: var(--warning-bg); color: var(--warning); }
.ds-badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.ds-badge-info    { background: var(--info-bg);    color: var(--info); }
.ds-badge-neutral { background: rgba(255,255,255,0.06); color: var(--muted); }

/* Alerts / flash messages */
.ds-alert {
    display: flex; align-items: flex-start; gap: 12px;
    border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: var(--space-5);
    font-size: 13px; line-height: 1.6;
}
.ds-alert-success { background: var(--success-bg); border: 1px solid rgba(0,200,150,0.25); color: var(--text); }
.ds-alert-error   { background: var(--danger-bg);  border: 1px solid rgba(239,68,68,0.25); color: var(--text); }
.ds-alert-info    { background: var(--info-bg);    border: 1px solid rgba(59,130,246,0.25); color: var(--text); }

/* Tables */
.ds-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ds-table th {
    text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.ds-table td { padding: 14px; border-bottom: 1px solid var(--border); }
.ds-table tr:last-child td { border-bottom: none; }
.ds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Empty states */
.ds-empty { text-align: center; padding: var(--space-10) var(--space-5); }
.ds-empty-icon { font-size: 44px; margin-bottom: var(--space-4); display: block; }
.ds-empty h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: var(--space-2); }
.ds-empty p { font-size: 14px; color: var(--muted); margin-bottom: var(--space-5); }

/* KPI / stat block */
.ds-stat {
    background: var(--dark-2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px; display: flex; gap: 13px; align-items: center;
    transition: border-color var(--transition), transform var(--transition);
}
.ds-stat:hover { border-color: rgba(0,200,150,0.25); transform: translateY(-2px); }
.ds-stat-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-stat-label { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.ds-stat-val { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1; }

/* Avatar */
.ds-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #0af);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; color: var(--dark); flex-shrink: 0;
}

/* Skeleton loading */
.ds-skeleton {
    background: linear-gradient(90deg, var(--dark-3) 25%, var(--dark-4) 37%, var(--dark-3) 63%);
    background-size: 400% 100%; animation: ds-shimmer 1.4s ease infinite; border-radius: var(--radius-xs);
}
@keyframes ds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Code / reference text */
.ds-code { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }