/* =====================================================================
   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); }

.v2-btn-blue {
	background: var(--v2-blue);
	color: #fff;
	box-shadow: var(--v2-sh-blue);
}
.v2-btn-blue:hover { background: var(--v2-blue-deep); }

.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);
}

.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; }
}