/* دستیار — tokens. Light is the default (Grok Bot reference).
   Dark is optional via :root.dark. Onboarding pages keep data-theme=dark. */

@font-face {
  font-family: Vazirmatn;
  src: url(/fonts/vazirmatn_regular.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url(/fonts/vazirmatn_medium.ttf) format("truetype");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: Vazirmatn;
  src: url(/fonts/vazirmatn_bold.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* canvas */
  --bg: #FCFCFC;
  --bg-list: #F4F4F4;
  --surface: #FFFFFF;
  --bubble: #F1F1F3;          /* assistant bubble — no border */
  --user-bubble: #724CCC;     /* sampled from Grok Bot reference */
  --on-user: #FFFFFF;
  --hover: #EBEBEB;
  --selected: #E4E4E4;
  --divider: #E8E8EA;
  --sheet: #FFFFFF;
  --code: #F6F6F6;
  --icode: #EFEFEF;

  /* text */
  --text: #1C1C1C;
  --dim: #5D5D5D;
  --faint: #9A9A9E;

  /* actions */
  --purple: #724CCC;
  --purple-soft: #F3EEFC;
  --accent: #724CCC;
  --accent-press: #5E3CB0;
  --on-accent: #FFFFFF;
  --badge: #306CCC;           /* unread dot + more-unreads pill */
  --send: #724CCC;
  --onsend: #FFFFFF;
  --danger: #D92D20;
  --success: #2F9E5B;
  --warning: #C4841D;
  --link: #306CCC;

  --accent-soft: #F3EEFC;
  --success-soft: #E8F6EE;
  --warning-soft: #FBF3E0;
  --danger-soft: #FDECEC;

  --font: Vazirmatn, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs: 15px;
  --lh: 1.7;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --btn-h: 48px;
  --cta-h: 50px;
  --icon-btn: 40px;
  --pad-x: 20px;
  --shadow-chip: 0 0 0 1px #EBEBEB, 0 1px 3px rgba(0, 0, 0, .05);
  --shadow-float: 0 4px 16px rgba(0, 0, 0, .12);
}

/* optional dark — secondary */
:root.dark {
  --bg: #141414;
  --bg-list: #141414;
  --surface: #1C1C1E;
  --bubble: #2C2C2E;
  --user-bubble: #724CCC;
  --on-user: #FFFFFF;
  --hover: #1E1E1F;
  --selected: #2C2C2E;
  --divider: #3A3A3C;
  --sheet: #1F1F1F;
  --code: #1C1C1E;
  --icode: #2C2C2E;
  --text: #fff;
  --dim: #8E8E93;
  --faint: #6C6C70;
  --purple-soft: #2A2140;
  --accent-soft: #2A2140;
  --send: #fff;
  --onsend: #141414;
  --danger: #FF6B6B;
  --success: #4CAF6A;
  --warning: #E8A317;
  --link: #4C8DF6;
  --success-soft: color-mix(in srgb, var(--success) 18%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 16%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 16%, transparent);
  --shadow-chip: 0 0 0 1px #3A3A3C;
  --shadow-float: 0 4px 16px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: var(--text); }
a { color: var(--link); text-decoration: none; }