/* ================================================================
   NammaPayments — Design Token Theme
   ================================================================
   Single source of truth for all colours, spacing, typography,
   shadows and transitions across the entire application.

   HOW TO USE:
     Reference tokens with var(--np-*) in any CSS file.
     To retheme the entire app: edit values here only.

   SECTIONS:
     1. Brand Colours
     2. Gradients
     3. Surface & Background
     4. Text
     5. Status / Semantic
     6. Border
     7. Shadow
     8. Typography
     9. Spacing
    10. Transitions & Animation
    11. Z-index scale
    12. Bootstrap + Legacy aliases
   ================================================================ */

:root {

    /* ── 1. Brand Colours ── */
    --np-primary:          #0a6fa8;
    --np-primary-dark:     #065a8a;
    --np-primary-darker:   #044870;
    --np-primary-light:    #0badd4;
    --np-primary-lighter:  #4dcef0;
    --np-primary-subtle:   rgba(10, 111, 168, 0.12);

    --np-accent:           #0badd4;
    --np-accent-dark:      #0a9fc8;

    /* Glass / frosted tile surface (used on home menu tiles) */
    --np-tile-bg:          rgba(8,  100, 150, 0.82);
    --np-tile-bg-hover:    rgba(6,   80, 125, 0.95);
    --np-tile-bg-report:   rgba(8,  100, 150, 0.82);
    --np-tile-border:      rgba(255, 255, 255, 0.22);

    /* ── 2. Gradients ── */
    --np-gradient-primary: linear-gradient(135deg, var(--np-primary)      0%, var(--np-primary-light) 100%);
    --np-gradient-dark:    linear-gradient(135deg, var(--np-primary-dark)  0%, var(--np-primary)       100%);
    --np-gradient-tile:    linear-gradient(135deg, var(--np-tile-bg)       0%, rgba(10,160,200,0.82)   100%);
    --np-gradient-tile-hover: linear-gradient(135deg, var(--np-tile-bg-hover) 0%, rgba(8,135,175,0.95) 100%);
    --np-gradient-header:  linear-gradient(135deg, #2D3748 0%, #1a202c 100%);
    --np-gradient-page:    linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

    /* ── 3. Surface & Background ── */
    --np-bg-page:          #f8f9fa;
    --np-bg-white:         #ffffff;
    --np-bg-subtle:        #f8f9fa;
    --np-bg-raised:        #ffffff;
    --np-bg-glass:         rgba(255, 255, 255, 0.65);
    --np-bg-glass-heavy:   rgba(255, 255, 255, 0.88);
    --np-bg-overlay:       rgba(0, 0, 0, 0.45);

    /* Modal / card surfaces */
    --np-surface:          #ffffff;
    --np-surface-alt:      #fafbfc;
    --np-surface-header:   #ffffff;
    --np-surface-footer:   #ffffff;

    /* ── 4. Text ── */
    --np-text-primary:     #1a3a52;
    --np-text-secondary:   #495057;
    --np-text-muted:       #6c757d;
    --np-text-light:       #94a3b8;
    --np-text-on-dark:     #ffffff;
    --np-text-on-primary:  #ffffff;
    --np-text-link:        var(--np-primary);
    --np-text-link-hover:  var(--np-primary-dark);

    /* ── 5. Status / Semantic ── */
    --np-success:          #28a745;
    --np-success-bg:       #d1e7dd;
    --np-success-border:   #badbcc;
    --np-success-text:     #0f5132;
    --np-success-dark:     #218838;

    --np-danger:           #dc3545;
    --np-danger-bg:        #f8d7da;
    --np-danger-border:    #f5c2c7;
    --np-danger-text:      #842029;

    --np-warning:          #ffc107;
    --np-warning-bg:       #fff3cd;
    --np-warning-border:   #ffeaa7;
    --np-warning-text:     #856404;

    --np-info:             #0d6efd;
    --np-info-bg:          #d1ecf1;
    --np-info-border:      #bee5eb;
    --np-info-text:        #0c5460;

    /* ── 6. Border ── */
    --np-border:           #e2e8f0;
    --np-border-dark:      #dee2e6;
    --np-border-focus:     var(--np-primary-light);
    --np-border-input:     #ced4da;

    --np-radius-xs:        4px;
    --np-radius-sm:        6px;
    --np-radius-md:        8px;
    --np-radius-lg:        11px;
    --np-radius-xl:        14px;
    --np-radius-pill:      20px;
    --np-radius-circle:    50%;

    /* ── 7. Shadow ── */
    --np-shadow-xs:   0 1px 3px  rgba(0, 0, 0, 0.08);
    --np-shadow-sm:   0 2px 8px  rgba(0, 0, 0, 0.10);
    --np-shadow-md:   0 4px 16px rgba(0, 0, 0, 0.12);
    --np-shadow-lg:   0 8px 32px rgba(0, 60, 100, 0.15);
    --np-shadow-xl:   0 10px 40px rgba(0, 0, 0, 0.18);
    --np-shadow-primary: 0 4px 12px rgba(10, 111, 168, 0.35);
    --np-shadow-tile:    0 6px 24px rgba(0, 60, 100, 0.18);

    /* ── 8. Typography ── */
    --np-font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --np-font-mono:        'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --np-font-size-xs:     0.7rem;
    --np-font-size-sm:     0.8rem;
    --np-font-size-base:   0.875rem;
    --np-font-size-md:     1rem;
    --np-font-size-lg:     1.125rem;
    --np-font-size-xl:     1.25rem;

    --np-font-weight-normal:  400;
    --np-font-weight-medium:  500;
    --np-font-weight-semibold:600;
    --np-font-weight-bold:    700;

    --np-line-height:      1.6;

    /* ── 9. Spacing ── */
    --np-space-xs:    0.25rem;
    --np-space-sm:    0.5rem;
    --np-space-md:    1rem;
    --np-space-lg:    1.5rem;
    --np-space-xl:    2rem;
    --np-space-2xl:   3rem;

    /* ── 10. Transitions ── */
    --np-ease:             cubic-bezier(0.4, 0, 0.2, 1);
    --np-transition-fast:  0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --np-transition-base:  0.2s  cubic-bezier(0.4, 0, 0.2, 1);
    --np-transition-slow:  0.36s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── 11. Z-index scale ── */
    --np-z-base:      1;
    --np-z-dropdown:  100;
    --np-z-sticky:    200;
    --np-z-overlay:   400;
    --np-z-modal:     500;
    --np-z-toast:     9999;

    /* ── 12. Bootstrap + Legacy aliases ──
       Keeps old --namma-* vars working without touching existing CSS  */
    --namma-primary:   var(--np-primary);
    --namma-secondary: var(--np-accent);
    --namma-dark:      var(--np-text-primary);
    --namma-light:     var(--np-bg-page);
}

/* ================================================================
   Global base resets that apply across the whole app
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--np-font-family);
    font-size:   var(--np-font-size-base);
    line-height: var(--np-line-height);
    color:       var(--np-text-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--np-text-link);
    transition: color var(--np-transition-base);
}
a:hover { color: var(--np-text-link-hover); }

/* Focus ring — accessible, brand-coloured */
:focus-visible {
    outline: 2px solid var(--np-primary-light);
    outline-offset: 2px;
}

/* ================================================================
   Shared utility classes (opt-in — not forced globally)
   ================================================================ */

/* Buttons */
.np-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--np-space-sm);
    padding: 0.5rem 1rem;
    font-family: var(--np-font-family);
    font-size: var(--np-font-size-base);
    font-weight: var(--np-font-weight-semibold);
    border: none;
    border-radius: var(--np-radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--np-transition-base);
    line-height: 1.5;
}

.np-btn-primary {
    background: var(--np-gradient-primary);
    color: var(--np-text-on-primary);
    box-shadow: var(--np-shadow-primary);
}
.np-btn-primary:hover:not(:disabled) {
    background: var(--np-gradient-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(10, 111, 168, 0.4);
    color: var(--np-text-on-primary);
}
.np-btn-primary:disabled {
    background: var(--np-text-muted);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.np-btn-secondary {
    background: var(--np-text-muted);
    color: var(--np-text-on-dark);
}
.np-btn-secondary:hover:not(:disabled) {
    background: #545b62;
    transform: translateY(-1px);
    color: var(--np-text-on-dark);
}

.np-btn-ghost {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.38);
    color: rgba(255,255,255,0.75);
}
.np-btn-ghost:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.65);
    color: #fff;
}

/* Form controls */
.np-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--np-font-family);
    font-size: var(--np-font-size-base);
    border: 2px solid var(--np-border-input);
    border-radius: var(--np-radius-sm);
    background: var(--np-bg-white);
    color: var(--np-text-primary);
    transition: border-color var(--np-transition-base), box-shadow var(--np-transition-base);
    line-height: 1.5;
}
.np-input:focus {
    outline: none;
    border-color: var(--np-border-focus);
    box-shadow: 0 0 0 0.2rem var(--np-primary-subtle);
}
.np-input.is-invalid { border-color: var(--np-danger); }
.np-input.is-valid   { border-color: var(--np-success); }

/* Cards */
.np-card {
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-xl);
    box-shadow: var(--np-shadow-sm);
    overflow: hidden;
}

.np-card-header {
    background: var(--np-gradient-primary);
    color: var(--np-text-on-primary);
    padding: var(--np-space-sm) var(--np-space-md);
    font-weight: var(--np-font-weight-bold);
}

/* Badges */
.np-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 10px;
    border-radius: var(--np-radius-pill);
    font-size: var(--np-font-size-xs);
    font-weight: var(--np-font-weight-bold);
}
.np-badge-primary  { background: var(--np-gradient-primary); color: #fff; }
.np-badge-success  { background: var(--np-success); color: #fff; }
.np-badge-danger   { background: var(--np-danger);  color: #fff; }
.np-badge-warning  { background: var(--np-warning); color: #212529; }
.np-badge-muted    { background: var(--np-text-muted); color: #fff; }

/* Alerts */
.np-alert {
    display: flex;
    align-items: center;
    gap: var(--np-space-sm);
    padding: var(--np-space-sm) var(--np-space-md);
    border-radius: var(--np-radius-sm);
    border-left: 4px solid;
    font-size: var(--np-font-size-base);
}
.np-alert-success { background: var(--np-success-bg); border-color: var(--np-success); color: var(--np-success-text); }
.np-alert-danger  { background: var(--np-danger-bg);  border-color: var(--np-danger);  color: var(--np-danger-text);  }
.np-alert-warning { background: var(--np-warning-bg); border-color: var(--np-warning); color: var(--np-warning-text); }
.np-alert-info    { background: var(--np-info-bg);    border-color: var(--np-info);    color: var(--np-info-text);    }

/* Tables */
.np-table { width: 100%; font-size: var(--np-font-size-sm); border-collapse: collapse; }
.np-table thead th {
    background: var(--np-text-secondary);
    color: var(--np-text-on-dark);
    padding: 0.6rem 0.5rem;
    font-size: var(--np-font-size-xs);
    font-weight: var(--np-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
}
.np-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--np-border);
    vertical-align: middle;
}
.np-table tbody tr:hover { background: var(--np-primary-subtle); }

/* Loading spinner */
.np-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--np-border);
    border-top-color: var(--np-primary);
    border-radius: 50%;
    animation: np-spin 0.8s linear infinite;
}
@keyframes np-spin { to { transform: rotate(360deg); } }

/* Entrance animations */
@keyframes np-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes np-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes np-slide-down {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}