/* ════════════════════════════════════════════════════════════════════
   چت لرنینگ — Shared design system
   Light + dark tokens, base styles, components, motion.
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens — light (default) ───────────────────────────────── */
:root {
  color-scheme: light;

  /* Brand */
  --brand-1: #38bdf8;
  --brand-2: #0284c7;
  --brand-3: #7dd3fc;
  --accent: #0284c7;
  --accent-strong: #0369a1;
  --accent-soft: #e0f2fe;
  --accent-2: #14b8c4;          /* teal highlight */
  --accent-2-soft: #d7f5f7;
  --grad-brand: linear-gradient(135deg, #38bdf8 0%, #0284c7 45%, #0369a1 100%);
  --grad-brand-soft: linear-gradient(135deg, #e0f2fe 0%, #e7f6f7 100%);

  /* Surfaces */
  --bg: #f3f9fd;
  --bg-2: #e8f1f9;
  --surface: #ffffff;
  --surface-2: #f1f7fc;
  --surface-3: #e9f1f7;
  --surface-translucent: rgba(255, 255, 255, .72);
  --sidebar: #e6f4fb;
  --sidebar-hover: #d8ecf6;

  /* Lines & text */
  --border: #e5e7f2;
  --border-strong: #d4d7e8;
  --text: #15162b;
  --text-2: #3c3e57;
  --muted: #6b7088;
  --muted-2: #8a8fa6;

  /* Semantic */
  --green: #10b981;  --green-lt: #d6f5e8;  --green-ink: #06724e;
  --red: #ef4444;    --red-lt: #fde4e4;    --red-ink: #a41c1c;
  --amber: #f59e0b;  --amber-lt: #fdefcf;  --amber-ink: #8a5a06;
  --blue: #3b82f6;   --blue-lt: #dde9fe;

  /* Effects */
  --shadow-color: 224 226 245;
  --shadow-ink: 26 27 60;
  --shadow-xs: 0 1px 2px rgba(var(--shadow-ink), .06);
  --shadow-sm: 0 2px 8px rgba(var(--shadow-ink), .06);
  --shadow: 0 8px 24px -8px rgba(var(--shadow-ink), .14);
  --shadow-lg: 0 22px 50px -18px rgba(var(--shadow-ink), .26);
  --shadow-glow: 0 14px 40px -12px rgba(2, 132, 199, .4);
  --ring: 0 0 0 4px rgba(2, 132, 199, .18);

  /* Radii */
  --r-xs: 8px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Motion */
  --t-fast: .15s;
  --t: .25s;
  --t-slow: .45s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  --font: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Design tokens — dark ──────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-1: #38bdf8;
  --brand-2: #0284c7;
  --brand-3: #7dd3fc;
  --accent: #38bdf8;
  --accent-strong: #7dd3fc;
  --accent-soft: #0c4a6e;
  --accent-2: #2dd4bf;
  --accent-2-soft: #15312f;
  --grad-brand: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #0369a1 100%);
  --grad-brand-soft: linear-gradient(135deg, #0c2433 0%, #14262b 100%);

  --bg: #060c12;
  --bg-2: #0a121c;
  --surface: #0c1826;
  --surface-2: #122230;
  --surface-3: #1a2c3a20;
  --surface-translucent: rgba(12, 24, 38, .72);
  --sidebar: #091320;
  --sidebar-hover: #122230;

  --border: #282b48;
  --border-strong: #363a5c;
  --text: #eef0fb;
  --text-2: #c7cae0;
  --muted: #9095b2;
  --muted-2: #757a99;

  --green: #34d399;  --green-lt: #10301f;  --green-ink: #6ee7b7;
  --red: #f87171;    --red-lt: #3a1717;    --red-ink: #fca5a5;
  --amber: #fbbf24;  --amber-lt: #382a0c;  --amber-ink: #fcd34d;
  --blue: #60a5fa;   --blue-lt: #16243f;

  --shadow-color: 5 6 16;
  --shadow-ink: 0 0 0;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
  --shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 26px 60px -18px rgba(0, 0, 0, .75);
  --shadow-glow: 0 14px 44px -10px rgba(56, 189, 248, .45);
  --ring: 0 0 0 4px rgba(56, 189, 248, .25);
}

/* ── Base ──────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

/* Theme-transition damping for the whole tree */
:root.theme-anim * {
  transition: background-color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              color var(--t) var(--ease),
              fill var(--t) var(--ease),
              box-shadow var(--t) var(--ease) !important;
}

a { color: var(--accent); }

button,
[type="button"],
[type="submit"],
[type="reset"] {
  text-decoration: none;
}

::selection { background: rgba(2, 132, 199, .22); }
:root[data-theme="dark"] ::selection { background: rgba(56, 189, 248, .3); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: content-box; }

/* ── Ambient aurora background (subtle on app pages) ───────────────── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  will-change: transform;
}
.aurora .a1 {
  width: 480px; height: 480px;
  top: -160px; inset-inline-start: -120px;
  background: radial-gradient(circle, rgba(56, 189, 248, .5), transparent 70%);
  animation: floatA 22s var(--ease) infinite;
}
.aurora .a2 {
  width: 420px; height: 420px;
  bottom: -180px; inset-inline-end: -120px;
  background: radial-gradient(circle, rgba(20, 184, 196, .4), transparent 70%);
  animation: floatB 26s var(--ease) infinite;
}
.aurora .a3 {
  width: 360px; height: 360px;
  top: 40%; inset-inline-start: 55%;
  background: radial-gradient(circle, rgba(2, 132, 199, .32), transparent 70%);
  animation: floatA 30s var(--ease) infinite reverse;
}
:root[data-theme="dark"] .aurora span { opacity: .4; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--spring),
              box-shadow var(--t) var(--ease),
              background var(--t) var(--ease),
              border-color var(--t) var(--ease),
              opacity var(--t) var(--ease);
}
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited {
  text-decoration: none;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
  background: var(--grad-brand);
  background-size: 160% 160%;
  color: #fff;
  box-shadow: var(--shadow-glow);
  animation: hueDrift 8s var(--ease) infinite;
}
.btn-primary:hover { box-shadow: 0 18px 48px -10px rgba(2, 132, 199, .55); }

.btn-ghost { background: transparent; color: var(--text-2); border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); transform: translateY(-1px); }

.btn-outline {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-block { width: 100%; }
.btn-lg { padding: 15px 30px; font-size: 15px; border-radius: var(--r); }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ── Form fields ───────────────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 7px;
}
.input, .field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color var(--t) var(--ease),
              background var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--ring);
}
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.field select { cursor: pointer; }

/* Native select — match inputs (avoid browser default chrome) */
.select, .field select, select.form-input {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
}
:root[data-theme="dark"] .select,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Field with leading icon */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input-icon {
  position: absolute;
  inset-inline-start: 13px;
  width: 18px; height: 18px;
  color: var(--muted-2);
  pointer-events: none;
  transition: color var(--t) var(--ease);
}
.input-wrap input { padding-inline-start: 42px; }
.input-wrap:focus-within .input-icon { color: var(--accent); }

/* ── Cards ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ── Badges / pills ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.badge svg { width: 13px; height: 13px; }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-green  { background: var(--green-lt); color: var(--green-ink); }
.badge-amber  { background: var(--amber-lt); color: var(--amber-ink); }
.badge-red    { background: var(--red-lt); color: var(--red-ink); }

/* ── Theme toggle ──────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  line-height: 0;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t) var(--spring), border-color var(--t) var(--ease),
              color var(--t) var(--ease), background var(--t) var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

/* Both icons share the same grid cell — perfectly centered */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  pointer-events: none;
  transition: transform .5s var(--spring), opacity .35s var(--ease);
}
.theme-toggle svg {
  display: block;
  width: 19px;
  height: 19px;
}
.theme-toggle .icon-sun  { transform: rotate(0) scale(1); opacity: 1; }
.theme-toggle .icon-moon { transform: rotate(-90deg) scale(.4); opacity: 0; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { transform: rotate(90deg) scale(.4); opacity: 0; }
:root[data-theme="dark"] .theme-toggle .icon-moon { transform: rotate(0) scale(1); opacity: 1; }
.theme-toggle.floating {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 22px;
  z-index: 800;
  width: 46px; height: 46px;
  background: var(--surface-translucent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

[data-theme-toggle-slot] {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Animations ────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hueDrift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes floatA {
  0%,100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 50px) scale(1.12); }
}
@keyframes floatB {
  0%,100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -40px) scale(1.15); }
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes shimmer { 100% { background-position: 200% 0; } }
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(2,132,199,.4); }
  70% { box-shadow: 0 0 0 14px rgba(2,132,199,0); }
  100% { box-shadow: 0 0 0 0 rgba(2,132,199,0); }
}

.anim-fade-up { animation: fadeInUp .7s var(--ease-out) both; }
.float { animation: floaty 6s ease-in-out infinite; }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: var(--r-sm);
}

/* ── Scroll reveal ─────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* ── Helpers ───────────────────────────────────────────────────────── */
.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Organization badge ───────────────────────────────────────────── */
.org-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  white-space: nowrap;
}
.org-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.org-badge-logo {
  width: 18px; height: 18px; border-radius: 5px; object-fit: contain;
  flex-shrink: 0; background: #fff;
}
.org-role-pill {
  font-size: 10px; font-weight: 700; color: var(--muted); padding-inline: 4px;
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}