/* =====================================================================
   Snaproll v2 — component primitives
   ---------------------------------------------------------------------
   Buttons, form fields, badges, schema-tags, type utilities. Imported
   by every v2 surface page (landing, login, dashboard, etc.) AFTER
   tokens.css + base.css.

   Extracted from design/v2/prototype/src/styles.css. Keep in sync if
   the prototype updates.

   ⚠ Import order: tokens.css → base.css → THIS FILE → page-specific CSS
   ===================================================================== */

/* =====================================================================
   BUTTONS
   ===================================================================== */
.v2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 14px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--v2-ink);
	transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
	letter-spacing: -0.005em;
	white-space: nowrap;
	cursor: pointer;
	font-family: inherit;
}
.v2-btn:hover { transform: translateY(-1px); }
.v2-btn:active { transform: translateY(0); }
.v2-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.v2-btn-primary {
	background: var(--v2-ink);
	color: #fff;
	box-shadow: 0 8px 18px rgba(11, 27, 43, 0.16);
}
.v2-btn-primary:hover { background: var(--v2-ink-2); box-shadow: 0 12px 24px rgba(11, 27, 43, 0.22); }

/* PR #232 — `.v2-btn-blue` re-pointed at the ink color (was solid blue).
   Founder spec: "instead of using the blue Buttons lets use same darker
   theme buttons across the app in Desktop and in PWA both". Single
   override here ripples through every button on every screen (PWA
   topbar "+ New form", Form Wizard "Create form", Form Data Dashboard
   "Open records →", etc.) — no per-site edits needed. Hover deepens by
   one tone (--v2-ink-2 falls back to a hard-coded near-black if not
   defined). The blue brand colour still ships via .v2-btn-soft for
   non-primary surfaces (links, tag chips) — only the SOLID primary
   button changed colour. */
.v2-btn-blue {
	background: var(--v2-ink);
	color: #fff;
	box-shadow: 0 8px 18px rgba(11, 27, 43, 0.16);
}
.v2-btn-blue:hover {
	background: var(--v2-ink-2, #16263A);
	box-shadow: 0 12px 24px rgba(11, 27, 43, 0.22);
}

.v2-btn-saffron {
	background: var(--v2-saffron);
	color: #fff;
}

.v2-btn-ghost {
	background: #fff;
	border-color: var(--v2-hair);
	color: var(--v2-ink);
}
.v2-btn-ghost:hover { background: #fafaf6; border-color: var(--v2-soft); }

.v2-btn-soft {
	background: var(--v2-blue-soft);
	color: var(--v2-blue-deep);
}

/* Destructive action. Used by v2dialog.confirm({ destructive: true })
   and by any inline "Delete" / "Remove" button that needs a strong red
   read instead of the standard blue. Hover is a tone darker to keep
   weight without going garish. */
.v2-btn-red {
	background: var(--v2-red);
	color: #fff;
	box-shadow: 0 8px 18px rgba(200, 52, 31, 0.24);
}
.v2-btn-red:hover { background: #A82B1A; }

.v2-btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 14px; }
.v2-btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; }
.v2-btn-icon {
	width: 36px; height: 36px;
	padding: 0;
	border-radius: 10px;
}
.v2-btn-full { width: 100%; }

/* =====================================================================
   FORMS
   ===================================================================== */
.v2-field { display: block; }
.v2-field-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--v2-ink-2);
	letter-spacing: -0.005em;
	margin-bottom: 6px;
	display: block;
}
.v2-input,
.v2-select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--v2-hair);
	border-radius: 12px;
	background: #fff;
	font-size: 15px;
	color: var(--v2-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
}
.v2-input:focus,
.v2-select:focus {
	outline: none;
	border-color: var(--v2-blue);
	box-shadow: 0 0 0 4px rgba(42, 111, 219, 0.14);
}
.v2-input::placeholder { color: var(--v2-soft); }

/* =====================================================================
   CARDS
   ===================================================================== */
.v2-card {
	background: var(--v2-card);
	border: 1px solid var(--v2-hair);
	border-radius: var(--v2-r-3);
	padding: 18px;
}
.v2-card-tight { padding: 14px; border-radius: var(--v2-r-2); }

/* =====================================================================
   BADGES / TAGS
   ===================================================================== */
.v2-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
}
.v2-badge.green { background: var(--v2-green-soft); color: var(--v2-green); }
.v2-badge.amber { background: var(--v2-amber-soft); color: var(--v2-amber); }
.v2-badge.red   { background: var(--v2-red-soft);   color: var(--v2-red); }
.v2-badge.blue  { background: var(--v2-blue-soft);  color: var(--v2-blue-deep); }
.v2-badge.gray  { background: #F2F1EB;              color: var(--v2-ink-2); }
.v2-badge .dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: currentColor;
}

/* schema tag — monospaced signature touch */
.v2-schema-tag {
	font-family: var(--v2-font-mono);
	font-size: 11px;
	background: var(--v2-blue-soft);
	color: var(--v2-blue-deep);
	padding: 2px 6px;
	border-radius: 5px;
	font-weight: 500;
}

/* =====================================================================
   TYPE UTILITIES
   ===================================================================== */
.v2-t-mono { font-family: var(--v2-font-mono); }
.v2-t-mut  { color: var(--v2-muted); }
.v2-t-soft { color: var(--v2-soft); }
.v2-t-up   {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
	font-weight: 700;
}

/* =====================================================================
   BILINGUAL (Hindi / Devanagari companion blocks) — v3 design
   ---------------------------------------------------------------------
   Hindi appears as smart hooks alongside the primary English copy on
   the most-read surfaces. Three classes for the three placements:

     .v2-hi        inline / one-line Hindi text (use for short hooks)
     .v2-hi-block  bordered companion block (use under English paragraphs)
     .v2-hi-sub    subtitle under a heading

   `.v2-hi-on-dark` is a modifier for use inside dark-background cards
   (greeting card, ink CTA, etc.) — replaces the muted-grey colour with
   a translucent white that reads on dark surfaces.

   HARD BRAND RULES (these matter — read once, enforce always):
     • NEVER use font-style: italic on Devanagari. The script has no
       true italic form; faked slants break the शिरोरेखा (top connecting
       bar) and hurt readability. `font-style: normal` is set on every
       bilingual class so a parent's italics CAN'T leak in.
     • Hindi = SMART HOOKS, not sentence-by-sentence translations.
     • NO Hindi on buttons or the Login page.
     • Devanagari with embedded English nouns, NOT romanised Hinglish.

   Webfont (Noto Sans Devanagari) must be loaded on the page; each v2
   page brings it in alongside Plus Jakarta Sans. Login-v2 deliberately
   does NOT load it (no Hindi on the login surface).
   ===================================================================== */

.v2-hi {
	font-family: "Noto Sans Devanagari", var(--v2-font-ui), sans-serif;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
}

.v2-hi-block {
	display: block;
	margin-top: 6px;
	padding: 8px 0 8px 12px;
	border-left: 2px solid var(--v2-blue-soft);
	color: var(--v2-muted);
	font-size: 13.5px;
	line-height: 1.65;
	font-weight: 500;
	font-style: normal;
	font-family: "Noto Sans Devanagari", var(--v2-font-ui), sans-serif;
	letter-spacing: 0;
}

.v2-hi-sub {
	display: block;
	margin-top: 4px;
	color: var(--v2-muted);
	font-size: 13px;
	font-weight: 500;
	font-style: normal;
	font-family: "Noto Sans Devanagari", var(--v2-font-ui), sans-serif;
	letter-spacing: 0;
}

/* Modifier — Hindi inside dark-background containers. */
.v2-hi-on-dark { color: rgba(255, 255, 255, 0.7); }

/* Defensive guard: even if a parent forces italic, Hindi stays upright. */
.v2-hi *, .v2-hi-block *, .v2-hi-sub * { font-style: normal !important; }

/* =====================================================================
   PULSE animation (used on the hero's "live" status dot)
   ===================================================================== */
.v2-pulse {
	animation: v2-pulse 1.6s ease-in-out infinite;
}
@keyframes v2-pulse {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.25); opacity: 0.5; }
}