/* ============================================================
   JOTWINGIA — design tokens · GLASS edition
   Dark-glass over an iridescent "oil-slick" aurora is the hero.
   Light is a pastel-frost counterpart. Token NAMES are stable so
   every screen inherits the new skin. Theme via [data-theme].
   ============================================================ */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  /* type scale — all sizes scale off --fs (font-size setting: s/m/l → 0.92/1/1.09) */
  --fs: 1;
  --t-11: calc(11px * var(--fs)); --t-12: calc(12px * var(--fs)); --t-13: calc(13px * var(--fs)); --t-14: calc(14px * var(--fs)); --t-15: calc(15px * var(--fs));
  --t-17: calc(17px * var(--fs)); --t-20: calc(20px * var(--fs)); --t-22: calc(22px * var(--fs)); --t-24: calc(24px * var(--fs)); --t-28: calc(28px * var(--fs)); --t-34: calc(34px * var(--fs));
  --t-44: calc(44px * var(--fs)); --t-60: calc(60px * var(--fs));

  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* radius — generous, floating-glass feel (1:1 with isolates) */
  --r-xs: 7px; --r-sm: 10px; --r-md: 13px; --r-lg: 17px; --r-xl: 20px; --r-2xl: 26px; --r-3xl: 32px; --r-full: 999px;

  /* cottage palette (vivid for glass) */
  --c1: #3b82ff; --c2: #ff5a64; --c3: #2fd27e; --c4: #b06bff; --c5: #ffc63d; --c6: #c89160;
}

/* ===================== DARK · the hero ===================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #06060d;
  --bg-2: #03030a;

  /* glass surfaces (1:1 with isolates — darker base, higher opacity) */
  --surface:   rgba(20,20,30,0.72);   /* default glass panel */
  --surface-2: rgba(34,34,48,0.72);   /* nested / input glass */
  --surface-3: rgba(46,46,64,0.78);   /* hover / raised */
  --surface-solid: #13131e;           /* when opacity is required (sticky rails) */
  --fill:      rgba(255,255,255,0.07);
  --fill-2:    rgba(255,255,255,0.12);
  --fill-strong: rgba(255,255,255,0.18);

  --separator: rgba(255,255,255,0.16);
  --separator-strong: rgba(255,255,255,0.24);

  --text:   #f4f5fb;
  --text-2: rgba(236,238,250,0.64);
  --text-3: rgba(236,238,250,0.40);
  --text-4: rgba(236,238,250,0.24);

  --accent:      #7b78ff;
  --accent-hover:#9491ff;
  --accent-soft: rgba(123,120,255,0.20);
  --on-accent:   #ffffff;
  --accent-glow: 0 0 26px rgba(95,90,255,0.42);

  --paid:        #2fe07e;  --paid-soft:    rgba(47,224,126,0.18);
  --partial:     #ffba3d;  --partial-soft: rgba(255,186,61,0.18);
  --unpaid:      #ff5d6c;  --unpaid-soft:  rgba(255,93,108,0.18);
  --warning:     #ffba3d;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 8px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.6);
  --shadow-modal: 0 40px 120px rgba(0,0,0,.7);

  --glass-blur: blur(22px) saturate(135%);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 0.5px rgba(255,255,255,0.05);
  --bar-tint: 0.5;
  --ring: 0 0 0 1px rgba(255,255,255,0.06);

  /* iridescent aurora layers (oil-slick) — dimmed orbs */
  --aurora:
    radial-gradient(38% 50% at 18% 26%, rgba(58,92,255,0.34), transparent 62%),
    radial-gradient(46% 52% at 64% 16%, rgba(132,60,255,0.30), transparent 64%),
    radial-gradient(52% 60% at 84% 72%, rgba(255,70,140,0.20), transparent 64%),
    radial-gradient(50% 60% at 40% 92%, rgba(20,180,255,0.19), transparent 64%),
    radial-gradient(40% 40% at 96% 40%, rgba(255,120,40,0.13), transparent 60%);
  --aurora-base: #06060d;
}

/* ===================== LIGHT · pastel frost ===================== */
[data-theme="light"] {
  color-scheme: light;

  --bg: #e9ecf7;
  --bg-2: #dfe3f1;

  --surface:   rgba(255,255,255,0.82);
  --surface-2: rgba(255,255,255,0.95);
  --surface-3: rgba(255,255,255,1);
  --surface-solid: #ffffff;
  --fill:      rgba(40,40,90,0.06);
  --fill-2:    rgba(40,40,90,0.10);
  --fill-strong: rgba(40,40,90,0.15);

  --separator: rgba(30,30,70,0.13);
  --separator-strong: rgba(30,30,70,0.26);

  --text:   #181830;
  --text-2: rgba(28,28,60,0.62);
  --text-3: rgba(28,28,60,0.42);
  --text-4: rgba(28,28,60,0.26);

  --accent:      #5b54f5;
  --accent-hover:#4a43e6;
  --accent-soft: rgba(91,84,245,0.14);
  --on-accent:   #ffffff;
  --accent-glow: 0 0 22px rgba(91,84,245,0.3);

  --paid:        #12a85e;  --paid-soft:    rgba(18,168,94,0.14);
  --partial:     #c4820f;  --partial-soft: rgba(196,130,15,0.16);
  --unpaid:      #db3a4a;  --unpaid-soft:  rgba(219,58,74,0.14);
  --warning:     #c4820f;

  --shadow-sm: 0 1px 2px rgba(40,40,90,.10);
  --shadow-md: 0 12px 34px rgba(40,40,90,.16);
  --shadow-lg: 0 26px 64px rgba(40,40,90,.22);
  --shadow-modal: 0 44px 120px rgba(40,40,90,.28);

  --glass-blur: blur(36px) saturate(150%);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(255,255,255,0.5);
  --bar-tint: 0.22;
  --ring: 0 0 0 1px rgba(255,255,255,0.5);

  --aurora:
    radial-gradient(42% 52% at 16% 22%, rgba(120,150,255,0.55), transparent 62%),
    radial-gradient(46% 54% at 70% 14%, rgba(176,140,255,0.50), transparent 64%),
    radial-gradient(54% 60% at 86% 78%, rgba(120,220,210,0.45), transparent 64%),
    radial-gradient(50% 60% at 36% 94%, rgba(150,190,255,0.45), transparent 64%);
  --aurora-base: #e9ecf7;
}

/* ===================== primitives ===================== */
*, *::before, *::after { box-sizing: border-box; }

.scr {
  font-family: var(--font);
  background: var(--aurora-base);
  color: var(--text);
  width: 100%; height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* iridescent aurora painted behind every screen */
.scr::before {
  content: ""; position: absolute; inset: -10%;
  background: var(--aurora); background-color: var(--aurora-base);
  filter: blur(20px) saturate(125%);
  z-index: -1; pointer-events: none;
}

.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--t-11); font-weight: var(--w-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

/* the core glass recipe */
.glass {
  background: var(--surface);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--separator);
  box-shadow: var(--glass-edge), var(--shadow-md);
}

/* payment pin — szklany klejnot (neon), kolor = status; jednolity rozmiar i blask we wszystkich stanach */
.pin { width: 9px; height: 9px; border-radius: var(--r-full); flex: 0 0 auto; position: relative;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 24%),
    radial-gradient(120% 120% at 60% 80%, var(--pin-b) 0%, var(--pin-m) 42%, var(--pin-d) 100%);
  box-shadow: 0 0 2.5px var(--pin-h), 0 0 5px var(--pin-h),
    inset 0 0.5px 0.5px rgba(255,255,255,0.7), inset 0 -1px 1.5px rgba(0,0,0,0.4); }
.pin-paid    { --pin-d:#007a3a; --pin-m:#00d566; --pin-b:#7dffba; --pin-h:#19ff7e; }
.pin-partial { --pin-d:#a85600; --pin-m:#ff9d00; --pin-b:#ffe07a; --pin-h:#ffae1f; }
.pin-unpaid  { --pin-d:#9e0020; --pin-m:#ff1f44; --pin-b:#ff96a3; --pin-h:#ff2d4d; }