/* ========================================================================
   NexKoins Design Tokens — v1.0
   Source: brand/nexkoins.md
   ------------------------------------------------------------------------
   Shared across UniHub, NK Ledger, NK Office.
   Each app imports this file and overrides --nk-brand-primary
   with its own title accent colour.
   ======================================================================== */

:root {
  /* -------------------------------------------------------------
     1. PALETTE
     ------------------------------------------------------------- */

  /* Primary brand */
  --nk-midnight:   #0E1628;  /* primary dark (headings, dark surfaces) */
  --nk-parchment:  #F4ECD8;  /* primary light surface — warm, not clinical */
  --nk-brass:      #B8892F;  /* signature accent */

  /* Neutrals */
  --nk-ink:        #1A1A1A;  /* body text on light */
  --nk-dove:       #E8E6E1;  /* secondary light surface, dividers */
  --nk-fog:        #8B8B8B;  /* muted text, placeholders */
  --nk-white:      #FFFFFF;
  --nk-black:      #000000;

  /* Editorial accent (use sparingly) */
  --nk-burgundy:   #5E2A2A;  /* quotes, signatures, heritage moments */

  /* Status */
  --nk-moss:       #4F7942;  /* success, positive, on track */
  --nk-amber:      #C17817;  /* warning, at risk, pending */
  --nk-rust:       #A23D2A;  /* error, critical, overdue */
  --nk-slate:      #475569;  /* informational, neutral */

  /* Semantic aliases (prefer these in components) */
  --nk-bg:             var(--nk-parchment);
  --nk-surface:        var(--nk-white);
  --nk-surface-alt:    var(--nk-dove);
  --nk-text:           var(--nk-ink);
  --nk-text-muted:     var(--nk-fog);
  --nk-text-inverse:   var(--nk-parchment);
  --nk-border:         rgba(14, 22, 40, 0.12);
  --nk-border-strong:  rgba(14, 22, 40, 0.24);
  --nk-accent:         var(--nk-brass);

  /* Per-app brand primary — override in each app's own stylesheet:
       UniHub    → --nk-brand-primary: var(--nk-brass);
       NK Ledger → --nk-brand-primary: var(--nk-burgundy);
       NK Office → --nk-brand-primary: var(--nk-midnight);
  */
  --nk-brand-primary: var(--nk-brass);

  /* -------------------------------------------------------------
     2. TYPOGRAPHY
     ------------------------------------------------------------- */

  --nk-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --nk-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nk-font-mono:    'IBM Plex Mono', 'Menlo', 'Consolas', monospace;

  /* Type scale */
  --nk-text-xs:   11px;
  --nk-text-sm:   13px;
  --nk-text-base: 14px;   /* default body */
  --nk-text-md:   16px;   /* body emphasis / mobile input size (prevents iOS zoom) */
  --nk-text-lg:   18px;   /* H3 */
  --nk-text-xl:   24px;   /* H2 */
  --nk-text-2xl:  32px;   /* H1 */
  --nk-text-3xl:  48px;   /* display */

  /* Line heights */
  --nk-leading-tight:   1.2;
  --nk-leading-normal:  1.4;
  --nk-leading-relaxed: 1.6;

  /* Letter spacing */
  --nk-tracking-tight:  -0.01em;
  --nk-tracking-normal: 0;
  --nk-tracking-wide:   0.05em;
  --nk-tracking-wider:  0.12em;  /* ALL-CAPS LABELS */

  /* Font weights */
  --nk-weight-regular:  400;
  --nk-weight-medium:   500;
  --nk-weight-semibold: 600;
  --nk-weight-bold:     700;

  /* -------------------------------------------------------------
     3. SPACING (8-point grid)
     ------------------------------------------------------------- */

  --nk-space-1: 4px;
  --nk-space-2: 8px;
  --nk-space-3: 12px;
  --nk-space-4: 16px;
  --nk-space-5: 24px;
  --nk-space-6: 32px;
  --nk-space-7: 48px;
  --nk-space-8: 64px;
  --nk-space-9: 96px;

  /* -------------------------------------------------------------
     4. RADIUS
     ------------------------------------------------------------- */

  --nk-radius-xs:  2px;
  --nk-radius-sm:  4px;
  --nk-radius-md:  6px;
  --nk-radius-lg:  10px;
  --nk-radius-xl:  16px;
  --nk-radius-pill: 999px;

  /* -------------------------------------------------------------
     5. ELEVATION
     ------------------------------------------------------------- */

  --nk-shadow-xs: 0 1px 2px rgba(14, 22, 40, 0.06);
  --nk-shadow-sm: 0 1px 3px rgba(14, 22, 40, 0.10), 0 1px 2px rgba(14, 22, 40, 0.06);
  --nk-shadow-md: 0 4px 12px rgba(14, 22, 40, 0.10), 0 2px 4px rgba(14, 22, 40, 0.06);
  --nk-shadow-lg: 0 12px 24px rgba(14, 22, 40, 0.14), 0 4px 8px rgba(14, 22, 40, 0.08);
  --nk-shadow-xl: 0 24px 48px rgba(14, 22, 40, 0.18);
  --nk-shadow-inset: inset 0 1px 2px rgba(14, 22, 40, 0.06);

  /* Focus ring */
  --nk-focus-ring: 0 0 0 2px var(--nk-bg), 0 0 0 4px var(--nk-brass);

  /* -------------------------------------------------------------
     6. MOTION
     ------------------------------------------------------------- */

  --nk-duration-fast:   120ms;
  --nk-duration-normal: 200ms;
  --nk-duration-slow:   400ms;

  --nk-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --nk-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --nk-ease-out:      cubic-bezier(0, 0, 0.2, 1);

  /* -------------------------------------------------------------
     7. LAYOUT
     ------------------------------------------------------------- */

  --nk-container-sm:  640px;
  --nk-container-md:  768px;
  --nk-container-lg:  1024px;
  --nk-container-xl:  1280px;

  /* Touch targets */
  --nk-touch-min: 44px;  /* Apple HIG, WCAG AAA */

  /* -------------------------------------------------------------
     8. Z-INDEX
     ------------------------------------------------------------- */

  --nk-z-dropdown:  100;
  --nk-z-sticky:    200;
  --nk-z-fixed:     300;
  --nk-z-overlay:   400;
  --nk-z-modal:     500;
  --nk-z-toast:     600;
  --nk-z-tooltip:   700;
}

/* ========================================================================
   UTILITY CLASSES
   Core mobile-safe patterns every app can reuse.
   ======================================================================== */

/* Visually hidden but accessible to screen readers */
.nk-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive table wrapper — add a visible scroll shadow on mobile */
.nk-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--nk-surface) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--nk-surface) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(14, 22, 40, 0.18), rgba(14, 22, 40, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(14, 22, 40, 0.18), rgba(14, 22, 40, 0)) right center;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* Safe modal — viewport-aware, keyboard-aware */
.nk-modal-surface {
  max-width: min(92vw, 680px);
  max-height: min(92vh, calc(100vh - 32px));
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Single-column form on mobile */
@media (max-width: 600px) {
  .nk-form-grid { grid-template-columns: 1fr !important; }
}

/* Minimum touch target on mobile */
@media (max-width: 768px) {
  .nk-touch-safe,
  .nk-btn,
  button.nk-btn,
  .nk-btn-sm {
    min-height: var(--nk-touch-min);
    min-width: var(--nk-touch-min);
  }
}

/* Always-visible action buttons on touch devices (kills hover-only affordance) */
@media (hover: none) {
  .nk-hover-only { opacity: 1 !important; }
}