/* Caytopia — design system v2 ("Island Luxe").
   Layout concept: luminous glass cards floating over a living island; colour comes from Bahamian light —
   lagoon water, flag aquamarine & gold, flamingo, conch, hibiscus, Junkanoo crepe — used in gradients with intent,
   on calm sand-white surfaces. Every UI file (game.js, interior.js, avatar.js CAS, render3d overlay) uses these tokens. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&family=Shrikhand&display=swap');

:root {
  color-scheme: light;
  /* ink & surfaces */
  --nl-ink: #0B1430;            /* primary text, primary buttons */
  --nl-ink-2: #3A4566;          /* secondary text */
  --nl-ink-3: #7A84A3;          /* tertiary / captions */
  --nl-line: rgba(11, 20, 48, .08);
  --nl-bg: #F3F6FB;             /* app background (cool cloud) */
  --nl-surface: #FFFFFF;
  --nl-surface-2: #F7F9FC;
  --nl-sand: #FFF8EE;           /* warm paper (certificates, receipts) */
  --nl-glass: rgba(255, 255, 255, .72);
  --nl-glass-dark: rgba(11, 20, 48, .58);

  /* Bahamian brand colours */
  --nl-aqua: #00C2C7;           /* flag aquamarine */
  --nl-teal: #00A693;           /* state: online, selected, progress */
  --nl-lagoon: #2FD9D0;
  --nl-ocean: #0A6FB8;
  --nl-gold: #FFC72C;           /* flag gold */
  --nl-sunrise: #FF9E3D;
  --nl-flamingo: #FF5C8A;
  --nl-conch: #FF7A59;
  --nl-hibiscus: #E8336D;
  --nl-lilac: #8B7CF6;
  --nl-sky: #5EB8FF;
  --nl-palm: #2BB673;

  /* semantic (never used as decoration) */
  --nl-good: #16C79A;
  --nl-warn: #FFB020;           /* construction/caution only */
  --nl-owed: #FF4D5E;           /* money owed, over limit, pursuit */

  /* signature gradients */
  --nl-grad-lagoon: linear-gradient(135deg, #7FF0E6 0%, #00C2C7 45%, #0A6FB8 100%);
  --nl-grad-flag: linear-gradient(135deg, #00C2C7 0%, #00C2C7 55%, #FFC72C 55%, #FFC72C 100%);
  --nl-grad-dusk: linear-gradient(160deg, #FFB38A 0%, #FF7FA8 35%, #A98BFF 70%, #4C6FFF 100%);
  --nl-grad-sunrise: linear-gradient(135deg, #FFE08A 0%, #FF9E3D 50%, #FF5C8A 100%);
  --nl-grad-junkanoo: linear-gradient(110deg, #FF5C8A, #FFC72C 25%, #2BB673 50%, #00C2C7 75%, #8B7CF6);
  --nl-grad-night: linear-gradient(160deg, #1B2A5C 0%, #0B1430 70%);
  --nl-grad-gold: linear-gradient(135deg, #FFE7A0 0%, #FFC72C 50%, #E59A00 100%);

  /* per-feature hero tints (header bands, icons) */
  --nl-f-travel: var(--nl-grad-lagoon);
  --nl-f-gov: var(--nl-grad-flag);
  --nl-f-court: linear-gradient(135deg, #1B2A5C 0%, #0B1430 60%, #C9A24A 140%);
  --nl-f-ub: linear-gradient(135deg, #0B1430 0%, #00A693 100%);
  --nl-f-cars: linear-gradient(135deg, #BFF5EA 0%, #6FD6C8 50%, #2A8F9E 100%);
  --nl-f-gas: linear-gradient(135deg, #2FD9D0 0%, #00A693 60%, #0B1430 140%);
  --nl-f-gigs: linear-gradient(135deg, #FFB38A 0%, #FF7A59 55%, #E8336D 100%);
  --nl-f-company: var(--nl-grad-sunrise);
  --nl-f-skills: linear-gradient(135deg, #A98BFF 0%, #5EB8FF 100%);
  --nl-f-homes: linear-gradient(135deg, #FFD3B0 0%, #FF7FA8 100%);
  --nl-f-junkanoo: var(--nl-grad-junkanoo);

  /* portrait tints (curated 16) */
  --nl-tint-seaglass: #CDEFE6; --nl-tint-ice: #DCEFFB; --nl-tint-sky: #CFE0F5; --nl-tint-lilac: #E3DDF5;
  --nl-tint-rose: #FAD9E0; --nl-tint-blush: #F8D8C8; --nl-tint-apricot: #FCE3C2; --nl-tint-butter: #F6E6B0;
  --nl-tint-sage: #D7EBD2; --nl-tint-sand: #EEDFC6; --nl-tint-stone: #E6E1D8; --nl-tint-slate: #DDE2E8;
  --nl-tint-navy: #111B2E; --nl-tint-teal: #00A693; --nl-tint-seagreen: #4E8C80; --nl-tint-terracotta: #B9603E;

  /* type */
  --nl-font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --nl-font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nl-font-num: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --nl-font-logo: 'Shrikhand', 'Bricolage Grotesque', serif;
  --nl-fs-hero: clamp(30px, 5vw, 44px);
  --nl-fs-title: 28px; --nl-fs-h2: 20px; --nl-fs-body: 15px; --nl-fs-small: 13px; --nl-fs-cap: 11px;

  /* shape, depth, motion */
  --nl-r-xs: 8px; --nl-r-sm: 12px; --nl-r-md: 18px; --nl-r-lg: 24px; --nl-r-xl: 32px; --nl-r-pill: 999px;
  --nl-shadow-1: 0 1px 2px rgba(11,20,48,.06), 0 2px 8px rgba(11,20,48,.06);
  --nl-shadow-2: 0 4px 12px rgba(11,20,48,.08), 0 16px 40px rgba(11,20,48,.10);
  --nl-shadow-3: 0 10px 30px rgba(11,20,48,.14), 0 30px 80px rgba(11,20,48,.18);
  --nl-glow-teal: 0 0 0 4px rgba(0,166,147,.16), 0 8px 24px rgba(0,194,199,.35);
  --nl-glow-gold: 0 0 0 4px rgba(255,199,44,.20), 0 8px 24px rgba(255,158,61,.35);
  --nl-blur: saturate(1.6) blur(18px);
  --nl-ease-spring: cubic-bezier(.2, .9, .25, 1.2);
  --nl-ease-out: cubic-bezier(.16, 1, .3, 1);
  --nl-dur-fast: 140ms; --nl-dur: 260ms; --nl-dur-slow: 520ms;
}

/* ---- base components (opt-in classes, prefix nl-) ---- */
.nl-card { background: var(--nl-surface); border-radius: var(--nl-r-lg); box-shadow: var(--nl-shadow-2); border: 1px solid var(--nl-line); }
.nl-glass { background: var(--nl-glass); -webkit-backdrop-filter: var(--nl-blur); backdrop-filter: var(--nl-blur); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--nl-shadow-2), inset 0 1px 0 rgba(255,255,255,.7); border-radius: var(--nl-r-lg); }
.nl-hero { border-radius: var(--nl-r-lg) var(--nl-r-lg) 0 0; color: #fff; position: relative; overflow: hidden; }
.nl-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 90% 0%, rgba(255,255,255,.35), transparent 60%); pointer-events: none; }
.nl-title { font-family: var(--nl-font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
.nl-eyebrow { font: 700 var(--nl-fs-cap)/1 var(--nl-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--nl-teal); }
.nl-num { font-family: var(--nl-font-num); font-variant-numeric: tabular-nums; }
.nl-btn { font: 700 16px/1 var(--nl-font-ui); border: 0; border-radius: var(--nl-r-md); padding: 16px 20px; background: var(--nl-ink); color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px rgba(11,20,48,.28); transition: transform var(--nl-dur-fast) var(--nl-ease-spring), box-shadow var(--nl-dur) var(--nl-ease-out); }
.nl-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(11,20,48,.32); }
.nl-btn:active { transform: scale(.97); }
.nl-btn--glow { background: var(--nl-grad-lagoon); box-shadow: var(--nl-glow-teal); }
.nl-btn--gold { background: var(--nl-grad-gold); color: var(--nl-ink); box-shadow: var(--nl-glow-gold); }
.nl-btn--quiet { background: var(--nl-surface-2); color: var(--nl-ink); box-shadow: none; }
.nl-btn:focus-visible, .nl-row:focus-visible { outline: 3px solid var(--nl-aqua); outline-offset: 2px; }
.nl-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--nl-r-md); transition: background var(--nl-dur-fast); }
.nl-row.is-selected { background: color-mix(in srgb, var(--nl-teal) 12%, white); }
.nl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--nl-r-pill); font: 600 12px/1 var(--nl-font-ui); background: var(--nl-surface-2); color: var(--nl-ink-2); }
.nl-ring { --p: 0; --c: var(--nl-teal); background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(11,20,48,.08) 0); border-radius: 50%; }
.nl-owed { color: var(--nl-owed); }
@keyframes nl-pop { 0% { transform: scale(.92); opacity: 0 } 60% { transform: scale(1.02); opacity: 1 } 100% { transform: scale(1) } }
@keyframes nl-rise { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes nl-shimmer { from { background-position: -200% 0 } to { background-position: 200% 0 } }
.nl-enter { animation: nl-rise var(--nl-dur) var(--nl-ease-out) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }