/* =====================================================================
   Daryanavard — design tokens
   Light is the base; dark overrides only the values that change.
   ===================================================================== */

:root {
  /* ---- brand ---- */
  --brand-50:  #eef4ff;
  --brand-100: #dbe7ff;
  --brand-200: #bcd2ff;
  --brand-300: #8eb4ff;
  --brand-400: #5b8dfa;
  --brand-500: #356ceb;
  --brand-600: #2455cf;
  --brand-700: #1d43a6;
  --brand-800: #1c3b85;
  --brand-900: #1b3569;

  --accent-teal:   #0ea5a4;
  --accent-violet: #7c5cff;
  --accent-amber:  #f0913a;
  --accent-rose:   #e05c8a;

  /* ---- semantic ---- */
  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;
  --info:    #0284c7;

  /* ---- surfaces (light) ---- */
  --bg-app:     #eef1f6;
  --bg-surface: #ffffff;
  --bg-raised:  #ffffff;
  --bg-sunken:  #f5f7fa;
  --bg-hover:   rgba(15, 23, 42, .045);
  --bg-active:  rgba(15, 23, 42, .075);
  --bg-overlay: rgba(15, 23, 42, .42);
  --bg-inset:   #f0f3f8;

  /* chat wallpaper */
  --chat-bg:      #e9edf4;
  --chat-pattern: rgba(53, 108, 235, .045);

  /* ---- bubbles ---- */
  --bubble-in-bg:     #ffffff;
  --bubble-in-text:   #16202f;
  --bubble-out-bg:    linear-gradient(135deg, #3f7bf0 0%, #2f5fd6 100%);
  --bubble-out-solid: #356ceb;
  --bubble-out-text:  #ffffff;
  --bubble-meta-in:   #7c8798;
  --bubble-meta-out:  rgba(255, 255, 255, .78);

  /* ---- text ---- */
  --text-strong: #0f172a;
  --text:        #1f2937;
  --text-muted:  #64748b;
  --text-faint:  #94a3b8;
  --text-invert: #ffffff;
  --text-link:   var(--brand-600);

  /* ---- lines ---- */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --border-subtle: rgba(15, 23, 42, .06);

  /* ---- elevation ---- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, .07);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, .10);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, .16);
  --shadow-bubble: 0 1px 1.5px rgba(15, 23, 42, .09);

  /* ---- shape ---- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ---- spacing ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ---- type ---- */
  --font-sans: "Vazirmatn", "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui,
               -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code",
               Consolas, monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-base: 14.5px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 24px;

  --lh-tight: 1.35;
  --lh-normal: 1.62;

  /* ---- layout ---- */
  --sidebar-w: 344px;
  --info-w: 336px;
  --head-h: 60px;
  --composer-min-h: 60px;
  --bubble-max: min(560px, 74%);

  /* ---- motion ---- */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 130ms;
  --t-base: 200ms;
  --t-slow: 320ms;

  --z-sticky: 10;
  --z-fab: 20;
  --z-scrim: 60;
  --z-panel: 70;
  --z-menu: 90;
  --z-modal: 100;
  --z-lightbox: 110;
  --z-toast: 120;

  color-scheme: light;
}

/* =====================================================================
   Dark
   ===================================================================== */
[data-theme="dark"] {
  --bg-app:     #0b1119;
  --bg-surface: #131c27;
  --bg-raised:  #18232f;
  --bg-sunken:  #0e161f;
  --bg-hover:   rgba(255, 255, 255, .05);
  --bg-active:  rgba(255, 255, 255, .085);
  --bg-overlay: rgba(3, 7, 12, .66);
  --bg-inset:   #0f1822;

  --chat-bg:      #0d141d;
  --chat-pattern: rgba(140, 180, 255, .035);

  --bubble-in-bg:     #1c2733;
  --bubble-in-text:   #e7edf5;
  --bubble-out-bg:    linear-gradient(135deg, #2f62d8 0%, #234ba8 100%);
  --bubble-out-solid: #2f62d8;
  --bubble-out-text:  #ffffff;
  --bubble-meta-in:   #8698ad;
  --bubble-meta-out:  rgba(255, 255, 255, .74);

  --text-strong: #f1f5f9;
  --text:        #dde5ef;
  --text-muted:  #93a4b8;
  --text-faint:  #667a91;
  --text-invert: #0b1119;
  --text-link:   #7aa8ff;

  --border:        #22303f;
  --border-strong: #2f4054;
  --border-subtle: rgba(255, 255, 255, .06);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .40);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .48);
  --shadow-lg: 0 20px 54px rgba(0, 0, 0, .60);
  --shadow-bubble: 0 1px 2px rgba(0, 0, 0, .30);

  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #f05252;
  --info:    #38bdf8;

  color-scheme: dark;
}

/* Users who never picked a theme follow the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
  }
}

/* =====================================================================
   Fonts — self-hosted, no external requests (CSP blocks third parties)
   Drop the .woff2 files into assets/fonts/ to enable Vazirmatn.
   The stack degrades to Segoe UI / Tahoma when they are absent.
   ===================================================================== */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* =====================================================================
   Accessibility preferences
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border: #94a3b8;
    --text-muted: #475569;
  }
  [data-theme="dark"] {
    --border: #5b7a99;
    --text-muted: #b6c6d8;
  }
}