/* ============================================================
   Nexia PayTech — Design Tokens (UNIFIED v1)
   ============================================================
   Source: tokens.css (nexiapaytech), tailwind config (nexia),
   plus an emotion-forward expansion per brand direction:
   "young, daring, progressive — we sell emotions, not transactions."

   How to use:
     - Raw tokens: --np-blue-500, --np-sunset-500, --np-ink, etc.
     - Semantic tokens: --np-bg, --np-fg, --np-action, etc.
     - Type recipes:   .np-display, .np-h1, .np-body, .np-mono ...

   Cross-surface scaling:
     Web (shop/portal/provider) uses 14px base.
     Kiosk (touch, 1080×1920) overrides via [data-surface="kiosk"] — see bottom.
   ============================================================ */

/* ─── Fonts ─────────────────────────────────────────────────── */
/* Fonts load non-render-blocking via <link rel="preload"> in index.html,
   so a slow or blocked CDN can never stall first paint. Stacks below all
   declare system-font fallbacks, so the page is fully usable without them. */

:root {
  /* ============================================================
     PALETTE — RAW
     ============================================================ */

  /* Brand Blue — Aurora — the lightning-bolt N */
  --np-blue-50:   #EFF6FF;
  --np-blue-100:  #DBEAFE;
  --np-blue-200:  #BFDBFE;
  --np-blue-300:  #93C5FD;
  --np-blue-400:  #4393FF;  /* logo light */
  --np-blue-500:  #1F6EEE;  /* primary action / link */
  --np-blue-600:  #1A55CC;  /* hover */
  --np-blue-700:  #1740B8;  /* indigo, moody bg */
  --np-blue-800:  #102A85;
  --np-blue-900:  #0A1A5C;

  /* Aurora Gradient — the brand's signature flame */
  --np-grad-aurora:    linear-gradient(135deg, #4393FF 0%, #1F6EEE 60%, #1740B8 100%);
  --np-grad-aurora-soft: linear-gradient(135deg, #4393FF 0%, #1F6EEE 100%);
  --np-grad-aurora-radial: radial-gradient(ellipse at 30% 20%, #4393FF 0%, #1F6EEE 45%, #0A1A5C 100%);

  /* Ink — text + dark surfaces. Deeper than slate, true near-black-navy */
  --np-ink:        #0B1326;  /* canvas dark */
  --np-ink-soft:   #141B33;
  --np-ink-lift:   #1C2542;
  --np-ink-line:   rgba(255,255,255,0.10);

  /* Stone — light neutrals (lifted from nexiapaytech tokens.css) */
  --np-stone-50:   #FAFBFD;
  --np-stone-100:  #F5F7FA;
  --np-stone-150:  #EFF2F7;
  --np-stone-200:  #E5E9EF;
  --np-stone-300:  #D5DBE3;
  --np-stone-400:  #A6AEBC;
  --np-stone-500:  #6B7280;
  --np-stone-600:  #4D5566;
  --np-stone-700:  #333344;
  --np-stone-800:  #232333;
  --np-stone-900:  #1A1A2E;

  /* ============================================================
     EMOTION PALETTE — Georgia, hospitality, golden hour.
     Use these to break the "boring fintech blue" feel. Apply to
     hero washes, category tiles, illustrations, festive moments.
     ============================================================ */

  /* Sunset Amber — golden hour, hospitality, warmth */
  --np-sunset-50:  #FFF7E5;
  --np-sunset-100: #FFE9B8;
  --np-sunset-300: #FFC857;
  --np-sunset-500: #F5A623;
  --np-sunset-600: #E0890B;
  --np-sunset-700: #B36A04;

  /* Wine Berry — Kakheti vineyards, evening */
  --np-wine-50:    #FCE9EE;
  --np-wine-300:   #E08AA0;
  --np-wine-500:   #B14A60;
  --np-wine-600:   #8B2D4A;
  --np-wine-700:   #5F1A30;

  /* Sulfur Cream — Abanotubani baths, soft warmth */
  --np-cream-50:   #FFF8E1;
  --np-cream-200:  #FFE9A8;
  --np-cream-400:  #FFD56B;
  --np-cream-600:  #C7A23A;

  /* Mist Glacier — Caucasus glacier, alpine */
  --np-mist-50:    #F0F8FB;
  --np-mist-200:   #C8E1E8;
  --np-mist-400:   #88BDCC;
  --np-mist-600:   #437080;

  /* Forest Jade — canyon water, vineyards */
  --np-jade-50:    #E8F4EE;
  --np-jade-200:   #A6D4BB;
  --np-jade-500:   #2E7359;
  --np-jade-700:   #173B2D;

  /* Transactional — kept from existing system */
  --np-action-50:  #E6F6EC;
  --np-action-500: #00A040;  /* Pay / Confirm / Book ONLY */
  --np-action-600: #00863A;
  --np-action-700: #006428;

  /* Status (preserved from nexiapaytech) */
  --np-error:     #DC3545;  --np-error-50:   #FDECEE;
  --np-warning:   #FFC107;  --np-warning-50: #FFF8E1;
  --np-success:   #28A745;  --np-success-50: #E8F5EA;
  --np-info:      #17A2B8;  --np-info-50:    #E0F4F7;

  /* ============================================================
     SEMANTIC TOKENS — use these in components
     ============================================================ */

  /* Surfaces */
  --np-bg:           #FFFFFF;
  --np-bg-alt:       var(--np-stone-100);
  --np-bg-elev:      #FFFFFF;
  --np-bg-dark:      var(--np-ink);
  --np-bg-darker:    #06091A;
  --np-line:         var(--np-stone-200);
  --np-line-strong:  var(--np-stone-300);

  /* Foreground */
  --np-fg:           var(--np-ink);
  --np-fg-2:         var(--np-stone-700);   /* secondary text */
  --np-fg-3:         var(--np-stone-500);   /* muted / captions */
  --np-fg-on-dark:   #FFFFFF;
  --np-fg-on-dark-2: rgba(255,255,255,0.78);
  --np-fg-on-dark-3: rgba(255,255,255,0.55);

  /* Brand actions */
  --np-primary:      var(--np-blue-500);
  --np-primary-hov:  var(--np-blue-600);
  --np-primary-tint: var(--np-blue-50);
  --np-action:       var(--np-action-500);
  --np-action-hov:   var(--np-action-600);

  /* Focus */
  --np-focus-ring:   0 0 0 3px rgba(67,147,255,0.35);
  --np-focus-err:    0 0 0 3px rgba(220,53,69,0.30);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Families */
  --np-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --np-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --np-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Bricolage at high opsz is expressive; we wire it through font-variation-settings on .np-display* */

  /* Weight scale */
  --fw-400: 400; --fw-500: 500; --fw-600: 600; --fw-700: 700; --fw-800: 800;

  /* Size scale — fluid where applicable */
  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;
  --fs-16: 16px;  --fs-18: 18px;  --fs-20: 20px;  --fs-24: 24px;
  --fs-30: 30px;  --fs-36: 36px;  --fs-48: 48px;  --fs-60: 60px;
  --fs-72: 72px;  --fs-96: 96px;

  --fs-display:  clamp(56px, 8vw, 112px);   /* hero, "Discover Georgia" */
  --fs-h1:       clamp(38px, 4.5vw, 64px);
  --fs-h2:       clamp(28px, 3vw, 40px);
  --fs-h3:       24px;

  /* Line-height */
  --lh-tight:    1.02;
  --lh-snug:     1.18;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  /* Letter-spacing */
  --ls-display:  -0.035em;
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.08em;

  /* ============================================================
     SPACING — 4-step
     ============================================================ */
  --sp-0:  0;       --sp-1:  4px;     --sp-2:  8px;     --sp-3:  12px;
  --sp-4:  16px;    --sp-5:  20px;    --sp-6:  24px;    --sp-8:  32px;
  --sp-10: 40px;    --sp-12: 48px;    --sp-16: 64px;    --sp-20: 80px;
  --sp-24: 96px;    --sp-32: 128px;

  /* ============================================================
     RADIUS — generous, modern
     ============================================================ */
  --r-1:    4px;    /* hairline chips */
  --r-2:    6px;
  --r-3:    8px;    /* default inputs/buttons */
  --r-4:    12px;
  --r-5:    16px;   /* cards */
  --r-6:    20px;
  --r-7:    24px;   /* big cards, voucher */
  --r-8:    32px;   /* hero panels */
  --r-full: 999px;

  /* ============================================================
     SHADOWS — soft, layered. Avoid harsh.
     ============================================================ */
  --sh-1: 0 1px 0 0 rgba(11,19,38,0.04), 0 1px 2px 0 rgba(11,19,38,0.05);
  --sh-2: 0 1px 2px 0 rgba(11,19,38,0.06), 0 4px 8px -2px rgba(11,19,38,0.06);
  --sh-3: 0 4px 12px -2px rgba(11,19,38,0.10), 0 8px 24px -6px rgba(11,19,38,0.10);
  --sh-4: 0 8px 24px -8px rgba(11,19,38,0.14), 0 20px 48px -12px rgba(11,19,38,0.16);
  --sh-5: 0 16px 40px -12px rgba(11,19,38,0.22), 0 32px 80px -24px rgba(11,19,38,0.24);

  /* Brand-tinted shadow for action buttons */
  --sh-action:  0 2px 6px rgba(0,160,64,0.18), 0 8px 18px rgba(0,160,64,0.12);
  --sh-primary: 0 2px 6px rgba(31,110,238,0.22), 0 10px 24px rgba(31,110,238,0.16);

  /* Inner / press */
  --sh-inset:   inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(11,19,38,0.04);

  /* ============================================================
     MOTION
     ============================================================ */
  --t-fast:    120ms;
  --t-normal:  220ms;
  --t-slow:    360ms;
  --t-very-slow: 600ms;
  --t-ease:        cubic-bezier(0.2, 0, 0, 1);
  --t-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --t-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --topbar-h:        64px;
  --sidebar-w:       240px;
  --sidebar-w-collapsed: 56px;
  --test-banner-h:   32px;
  --content-max:     1280px;
  --content-max-narrow: 1120px;
}

/* ============================================================
   BASE
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--np-font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--np-fg);
  background: var(--np-bg);
  margin: 0;
}
::selection { background: var(--np-blue-200); color: var(--np-ink); }

/* ============================================================
   TYPE RECIPES — semantic
   ============================================================ */

.np-display {
  font-family: var(--np-font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-variation-settings: "opsz" 96, "wdth" 100;
  color: var(--np-fg);
  margin: 0;
}
.np-display-italic { font-style: italic; }

.np-h1 {
  font-family: var(--np-font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-variation-settings: "opsz" 48;
  color: var(--np-fg);
  margin: 0;
}

.np-h2 {
  font-family: var(--np-font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-variation-settings: "opsz" 36;
  color: var(--np-fg);
  margin: 0;
}

.np-h3 {
  font-family: var(--np-font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  color: var(--np-fg);
  margin: 0;
}

.np-h4 { font-family: var(--np-font-sans); font-size: var(--fs-18); font-weight: 600; line-height: 1.35; margin: 0; }

.np-lead {
  font-family: var(--np-font-sans);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: var(--lh-relaxed);
  color: var(--np-fg-2);
  margin: 0;
}

.np-body  { font-family: var(--np-font-sans); font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--np-fg-2); margin: 0; }
.np-body-sm { font-family: var(--np-font-sans); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--np-fg-2); margin: 0; }
.np-caption  { font-family: var(--np-font-sans); font-size: var(--fs-13); color: var(--np-fg-3); margin: 0; }
.np-micro    { font-family: var(--np-font-sans); font-size: var(--fs-12); color: var(--np-fg-3); margin: 0; }

.np-eyebrow {
  font-family: var(--np-font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--np-primary);
}

.np-mono     { font-family: var(--np-font-mono); font-size: 13px; }
.np-mono-sm  { font-family: var(--np-font-mono); font-size: 11px; letter-spacing: 0.02em; }

/* Display utilities for emotion */
.np-display-aurora {
  background: var(--np-grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.np-display-shadow { text-shadow: 0 4px 32px rgba(11,19,38,0.18); }
.np-display-on-photo {
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
}

/* ============================================================
   KIOSK overrides — touch, 1080×1920 portrait. Larger everything.
   ============================================================ */
[data-surface="kiosk"] {
  --fs-display: 96px;
  --fs-h1:      72px;
  --fs-h2:      48px;
  --fs-h3:      36px;
  --np-font-sans: "Inter", system-ui, sans-serif;
}
[data-surface="kiosk"] .np-body    { font-size: 22px; }
[data-surface="kiosk"] .np-body-sm { font-size: 18px; }
[data-surface="kiosk"] .np-caption { font-size: 16px; }

/* ============================================================
   UTILITIES
   ============================================================ */
.np-text-fg      { color: var(--np-fg); }
.np-text-fg-2    { color: var(--np-fg-2); }
.np-text-fg-3    { color: var(--np-fg-3); }
.np-text-primary { color: var(--np-primary); }
.np-text-action  { color: var(--np-action); }
.np-text-sunset  { color: var(--np-sunset-500); }
.np-text-wine    { color: var(--np-wine-500); }
.np-bg-aurora    { background: var(--np-grad-aurora); }
.np-bg-ink       { background: var(--np-ink); color: var(--np-fg-on-dark); }
.np-bg-cream     { background: var(--np-cream-50); }
.np-bg-mist      { background: var(--np-mist-50); }