/* Vorytix design tokens — modern, fresh, warm */
:root {
  /* Surfaces */
  --bg-cream: #F4EEE2;
  --bg-cream-2: #EDE6D7;
  --card: #FFFFFF;
  --card-2: #FAF6EC;
  --ink: #0E1015;
  --ink-2: #3D414A;
  --ink-3: #7B7F88;
  --ink-4: #B3B6BC;
  --line: rgba(14, 16, 21, 0.08);
  --line-2: rgba(14, 16, 21, 0.14);

  /* Brand */
  --saffron: #FF5B2E;
  --saffron-deep: #C9421A;
  --saffron-tint: #FFE3D7;
  --saffron-cream: #FFEFE6;

  --lime: #C8F252;
  --lime-deep: #4F6B0F;
  --lime-tint: #E9F8C2;

  --violet: #6B5BFF;
  --violet-tint: #E7E3FF;

  --teal: #194B47;
  --teal-tint: #D8E5E3;

  --coral: #FF8769;
  --rose: #FF4D6D;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Type */
  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-sans: "Plus Jakarta Sans", "Inter", -apple-system, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-guj: "Noto Sans Gujarati", "Plus Jakarta Sans", sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(14,16,21,0.04), 0 2px 8px rgba(14,16,21,0.04);
  --shadow-md: 0 2px 6px rgba(14,16,21,0.05), 0 10px 24px rgba(14,16,21,0.06);
  --shadow-lg: 0 4px 10px rgba(14,16,21,0.06), 0 20px 40px rgba(14,16,21,0.08);
  --shadow-saffron: 0 8px 24px -8px rgba(255, 91, 46, 0.55);
}

/* Screen reset — scoped to .vx-screen so it doesn't clobber the canvas */
.vx-screen, .vx-screen * {
  box-sizing: border-box;
}
.vx-screen {
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--bg-cream);
  width: 100%;
  height: 100%;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
.vx-screen .serif { font-family: var(--f-display); letter-spacing: -0.02em; font-weight: 400; }
.vx-screen .mono  { font-family: var(--f-mono); letter-spacing: 0; }
.vx-screen .guj   { font-family: var(--f-guj); }
.vx-screen button { font: inherit; border: 0; background: 0; padding: 0; cursor: pointer; color: inherit; }

/* Small primitives ---------------------------------------------------- */
.vx-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(14,16,21,0.06); color: var(--ink-2);
}
.vx-tag.ink { background: var(--ink); color: #fff; }
.vx-tag.saffron { background: var(--saffron-tint); color: var(--saffron-deep); }
.vx-tag.lime { background: var(--lime-tint); color: var(--lime-deep); }
.vx-tag.violet { background: var(--violet-tint); color: var(--violet); }

.vx-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Bottom tab bar */
.vx-tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  padding: 10px 8px 14px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.vx-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0; color: var(--ink-3);
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
}
.vx-tab.active { color: var(--ink); }
.vx-tab .ic { width: 22px; height: 22px; display: grid; place-items: center; }

/* Card-ish surface */
.vx-card {
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* Icons drawn as tiny geometric SVGs */
.vx-ic { display: inline-grid; place-items: center; }