/* =====================================================================
 * JDS / a2ui design tokens — VEA2UIApp JDS (Tailwind v4 reference), ported
 * to CSS variables for these vanilla prototypes.
 *
 * Brand: primary-50 #6d17ce (purple) · secondary-50 #00ad8b (teal) ·
 * sparkle-50 #0078ad (blue). Medium (500) typography. rounded-full buttons
 * (scale-on-hover, focus ring). 12px cards. Surface stepping.
 * Source of truth — do not introduce off-system hex.
 * ===================================================================== */

/* JioType — self-hosted per JDS (v4.6: "all self-hosted — no external CDN").
   Uses an OS-installed JioType if present, else woff2 files dropped into
   shared/fonts/. Until those exist, the --font stack falls back to -apple-system
   exactly as the JDS font stack specifies. (Replaces a dead raw.githubusercontent
   hot-link to a now-deleted repo.) */
@font-face { font-family: 'JioType'; font-weight: 400; font-display: swap;
  src: local('JioType'), url('fonts/JioType-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JioType'; font-weight: 500; font-display: swap;
  src: local('JioType Medium'), local('JioType'), url('fonts/JioType-Medium.woff2') format('woff2'); }
@font-face { font-family: 'JioType'; font-weight: 700; font-display: swap;
  src: local('JioType Bold'), local('JioType'), url('fonts/JioType-Bold.woff2') format('woff2'); }

:root {
  /* ===== a2ui color tokens ===== */
  --primary-20: #f6f3ff;
  --primary-30: #ede7ff;
  --primary-40: #e4dbff;
  --primary-50: #6d17ce;   /* ★ brand */
  --primary-60: #310064;
  --primary-70: #13002d;

  --secondary-20: #ddfef2;
  --secondary-30: #c0fae6;
  --secondary-40: #a6f4db;
  --secondary-50: #00ad8b;
  --secondary-60: #014c3b;

  --sparkle-20: #ecf7ff;
  --sparkle-30: #d8effe;
  --sparkle-40: #c4e7ff;
  --sparkle-50: #0078ad;
  --sparkle-60: #004566;

  --error: #fa2f40;
  --warning: #f06d0f;
  --success: #25ab21;
  --gold: #f7ab20;

  /* surfaces */
  --surface-default: #ffffff;
  --surface-minimal: #f5f5f5;
  --surface-ghost: #eeeeef;
  --surface-ghost-icon: #ede7ff;   /* primary-tinted icon containers */
  --surface-moderate: #e3e3e4;
  --surface-bold: #6d17ce;          /* = primary-50 — the brand fill */

  /* text */
  --text-high: #0c0d10;
  --text-low: rgba(12,13,16,0.65);
  --text-disabled: rgba(12,13,16,0.38);
  --text-on-bold: #ffffff;

  /* stroke */
  --stroke-subtle: rgba(12,13,16,0.12);
  --stroke-minimal: rgba(12,13,16,0.08);
  --stroke-tile: rgba(12,13,16,0.07);

  /* ===== legacy aliases (kept so existing markup keeps working) ===== */
  --grey-100: #0c0d10;
  --grey-90: rgba(12,13,16,0.82);
  --grey-80: rgba(12,13,16,0.65);
  --grey-60: rgba(12,13,16,0.45);
  --grey-40: #e3e3e4;
  --grey-20: #f5f5f5;
  --white: #ffffff;
  --black: #0c0d10;
  --icon-medium: #310064;
  --icon-high: #0c0d10;
  --primary: var(--primary-50);
  --primary-light: var(--primary-20);
  --primary-dark: var(--primary-60);
  --secondary: var(--secondary-50);
  --sparkle: var(--sparkle-50);

  /* Per-vertical accent — defaults to the brand purple; each surface may
     override --v-accent / --v-accent-soft / --v-accent-deep to one of a2ui's
     three brand tones (primary / secondary / sparkle). */
  --v-accent:      var(--primary-50);
  --v-accent-soft: var(--primary-20);
  --v-accent-deep: var(--primary-60);
  --v-accent-tint: var(--surface-ghost-icon);
  --vertical-accent: var(--v-accent);
  --vertical-accent-soft: var(--v-accent-soft);
  --vertical-accent-deep: var(--v-accent-deep);

  /* ===== Radii (a2ui) ===== */
  --radius-xs: 4px;     /* TagChip */
  --radius-sm: 8px;     /* images, QATrigger */
  --radius-md: 12px;    /* ★ cards, IconBox */
  --radius-lg: 16px;    /* large cards */
  --radius-xl: 24px;    /* sheets */
  --radius-pill: 999px;

  /* ===== Spacing (a2ui scale) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* ★ screen margin */
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ===== Typography (a2ui — all weight 500) ===== */
  /* JDS font stack: JioType (Latin/brand) → Mukta (Devanagari/Hindi) →
     Noto Sans Gujarati (Gujarati) → system. Per-script glyphs auto-route to
     the first family that has them; all self-hosted/local, no CDN. */
  --font: 'JioType', 'Mukta', 'Noto Sans Gujarati', -apple-system, sans-serif;
  --weight-medium: 500;
  --text-display: 28px;   /* headline-m */
  --text-h1: 24px;        /* headline-s */
  --text-h2: 20px;        /* headline-2xs / title-l */
  --text-h3: 16px;        /* title-s */
  --text-body: 14px;      /* body-s */
  --text-small: 12px;     /* body-2xs */
  --text-tiny: 10px;      /* overline */

  /* ===== Shadows (a2ui elev) ===== */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);    /* elev-1 hover lift */
  --shadow-md: 0 2px 12px rgba(0,0,0,0.04);   /* elev-2 cards */
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.18);   /* elev-3 */

  /* ===== Motion ===== */
  --ease-spring: cubic-bezier(0.175,0.885,0.32,1.275);
  --ease-smooth: cubic-bezier(0.45,0,0.55,1);
  --ease-snappy: cubic-bezier(0.2,0,0,1);
  --ease-gentle: cubic-bezier(0.4,0,0.2,1);
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--text-high);
  background: var(--surface-default);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.phone-frame {
  width: 100%;
  max-width: 390px;
  height: 100%;
  margin: 0 auto;
  background: var(--surface-default);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ===================================================================
 * BUTTONS — a2ui: rounded-full, font-jio, weight 500, scale-on-hover
 * (never a colour change), active:scale(0.97), JDS focus ring.
 * =================================================================== */
.btn { font-family: var(--font); cursor: pointer; border: none; font-weight: 500;
  transition: transform var(--ease-snappy) 200ms; user-select: none; }
.btn:focus-visible, .jds-focus:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--surface-default), 0 0 0 4px var(--primary-60);
}
.btn-primary {
  background: var(--primary-50);
  color: var(--text-on-bold);
  padding: 0 22px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body); font-weight: 500;
}
.btn-primary:hover { transform: scale(1.02); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; pointer-events: none; }
.btn-secondary {
  background: var(--primary-20);
  color: var(--primary-50);
  padding: 0 22px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body); font-weight: 500; border: none;
}
.btn-secondary:hover { transform: scale(1.02); }
.btn-secondary:active { transform: scale(0.97); }
.btn-tertiary {
  background: var(--surface-default);
  color: var(--primary-50);
  border: 1px solid var(--primary-50);
  padding: 0 22px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body); font-weight: 500;
}
.btn-tertiary:hover { transform: scale(1.02); }
.btn-tertiary:active { transform: scale(0.97); }

/* ===================================================================
 * CHIPS — a2ui JDSChip: rounded-full, ghost / active-primary, no border
 * =================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: none;
  color: var(--text-high);
  font-size: var(--text-body); font-weight: 500;
  background: var(--surface-ghost);
  cursor: pointer;
  transition: transform var(--ease-snappy) 200ms;
  white-space: nowrap;
  font-family: var(--font);
}
.chip:hover { transform: scale(1.02); }
.chip:active { transform: scale(0.97); }
.chip.active {
  background: var(--primary-50);
  color: var(--text-on-bold);
}

/* ===================================================================
 * CARDS — a2ui Card/SurfaceCard: rounded-md (12px), 1px subtle border,
 * elev-2 shadow.
 * =================================================================== */
.card {
  background: var(--surface-default);
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke-minimal);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
}

/* ===================================================================
 * a2ui ATOMS (reusable across surfaces)
 * =================================================================== */

/* FlashListenButton — purple pill with play/pause icon + label */
.jds-listen {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--primary-50); color: #fff; border: none;
  font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: transform var(--ease-snappy) 200ms;
}
.jds-listen:hover { transform: scale(1.02); }
.jds-listen:active { transform: scale(0.97); }
.jds-listen svg { width: 16px; height: 16px; fill: currentColor; }

/* NavButton — 40px circle, primary or neutral */
.jds-nav-btn {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; flex-shrink: 0; color: var(--text-high);
  background: var(--surface-ghost);
  transition: transform var(--ease-snappy) 200ms;
}
.jds-nav-btn.primary { background: var(--primary-50); color: #fff; }
.jds-nav-btn:hover:not(:disabled) { transform: scale(1.05); }
.jds-nav-btn:active:not(:disabled) { transform: scale(0.92); }
.jds-nav-btn:disabled { opacity: 0.35; cursor: default; }

/* IconBox — 44×44 rounded-md tinted container (icon/emoji) */
.jds-icon-box {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--surface-ghost-icon); color: var(--primary-50);
}
.jds-icon-box.secondary { background: var(--secondary-20); color: var(--secondary-50); }
.jds-icon-box.sparkle { background: var(--sparkle-20); color: var(--sparkle-50); }
.jds-icon-box.neutral { background: var(--surface-ghost); color: var(--text-high); }

/* IconCircle — 40px round tinted */
.jds-icon-circle {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--surface-ghost-icon); color: var(--primary-50);
}

/* Badges — rounded-full pill, tonal */
.jds-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: var(--text-small); font-weight: 500;
  background: var(--primary-20); color: var(--primary-50);
}
.jds-badge.success { background: #e6f7e6; color: var(--success); }
.jds-badge.sparkle { background: var(--sparkle-20); color: var(--sparkle-60); }
.jds-badge.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Avatar — 46px round, primary tint */
.jds-avatar {
  width: 46px; height: 46px; border-radius: var(--radius-pill);
  background: var(--primary-30); color: var(--primary-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 500; overflow: hidden; flex-shrink: 0;
}

/* SectionHeader — overline + title row (no horizontal padding; parent pads) */
.jds-section { margin: var(--space-5) var(--space-4) var(--space-3); }
.jds-section .ovl {
  display: block; font-size: var(--text-small); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-low); margin-bottom: 4px;
}
.jds-section .ttl { font-size: var(--text-body); font-weight: 500; color: var(--text-high); }

/* ===== Animations ===== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.3s var(--ease-smooth); }
.fade-in-up { animation: fadeInUp 0.35s var(--ease-gentle); }

/* Hide scrollbars (mobile-style) */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* ===== JBIQ pill — vertical identifier (a2ui StatusBadge style) ===== */
.jbiq-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--primary-20); color: var(--primary-50);
  font-size: var(--text-tiny); font-weight: 500;
  letter-spacing: 0.4px; text-transform: uppercase;
}

/* ===== Icon helpers ===== */
.jds-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; }