/* ---------------------------------------------------------------
   توکن‌های طراحی — رنگ، فاصله، تایپوگرافی
   تم روشن پیش‌فرض است، تم تاریک با data-theme="dark" یا
   ترجیح سیستم فعال می‌شود.
   --------------------------------------------------------------- */

:root {
  /* رنگ‌های برند */
  --brand-50:  #eef4ff;
  --brand-100: #dbe6ff;
  --brand-200: #bdd0ff;
  --brand-300: #91b0ff;
  --brand-400: #6286fb;
  --brand-500: #3f61f2;
  --brand-600: #2b43e0;
  --brand-700: #2434b6;
  --brand-800: #232f90;
  --brand-900: #222d72;

  --accent-400: #ffc247;
  --accent-500: #f5a524;
  --accent-600: #d98511;

  --mint-400: #34d399;
  --mint-500: #10b981;
  --mint-600: #059669;

  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;

  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;

  /* سطوح */
  --bg:            #f7f8fc;
  --bg-alt:        #eef1f8;
  --surface:       #ffffff;
  --surface-2:     #f4f6fb;
  --surface-3:     #e9edf6;
  --border:        #dfe4ee;
  --border-strong: #c6cede;

  /* متن */
  --text:      #16192b;
  --text-soft: #4a5169;
  --text-mute: #767e97;
  --text-on-brand: #ffffff;

  /* معنایی */
  --ok:   var(--mint-600);
  --ok-bg: #e6f8f1;
  --warn: #b45309;
  --warn-bg: #fdf3e3;
  --danger: var(--rose-600);
  --danger-bg: #fdeaee;
  --info: var(--brand-600);
  --info-bg: var(--brand-50);

  /* کد و ترمینال — همیشه تیره در هر دو تم (خواناتر و آشناتر) */
  --code-bg:      #14172a;
  --code-bg-2:    #1c2038;
  --code-border:  #2b3152;
  --code-text:    #e4e7f5;
  --code-gutter:  #5b6488;
  --code-kw:      #ff8db5;
  --code-str:     #a5e88f;
  --code-num:     #ffc86b;
  --code-comment: #77809e;
  --code-fn:      #7fc8ff;
  --code-builtin: #c4a2ff;
  --code-op:      #b7c0e0;

  /* شکل */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* سایه */
  --sh-sm: 0 1px 2px rgba(20, 24, 45, .06), 0 1px 3px rgba(20, 24, 45, .05);
  --sh-md: 0 4px 12px rgba(20, 24, 45, .07), 0 2px 4px rgba(20, 24, 45, .04);
  --sh-lg: 0 14px 34px rgba(20, 24, 45, .10), 0 4px 10px rgba(20, 24, 45, .05);
  --sh-brand: 0 8px 22px rgba(63, 97, 242, .28);

  /* فاصله */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px;

  /* تایپوگرافی */
  --font-fa: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-mono: 'Cascadia Code', 'Cascadia Mono', 'JetBrains Mono',
               'Fira Code', Consolas, 'Courier New', ui-monospace, monospace;

  --fs-xs: .78rem;  --fs-sm: .87rem;  --fs-base: 1rem;
  --fs-md: 1.08rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem;
  --fs-2xl: 1.9rem; --fs-3xl: 2.4rem; --fs-4xl: 3rem;

  --lh-tight: 1.35;
  --lh-body: 1.95;

  --header-h: 62px;
  --maxw: 1180px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0e1020;
    --bg-alt:        #12152a;
    --surface:       #171a30;
    --surface-2:     #1d2139;
    --surface-3:     #252a46;
    --border:        #2b3152;
    --border-strong: #3b4370;

    --text:      #eef0fa;
    --text-soft: #b6bdd8;
    --text-mute: #8790b0;

    --brand-50: #1a1f3d;
    --info-bg:  #1a2145;
    --ok-bg:    #102c26;
    --warn-bg:  #2e2411;
    --danger-bg:#31151f;
    --warn:     #fbbf24;
    --ok:       var(--mint-400);
    --danger:   var(--rose-400);
    --info:     var(--brand-300);

    --code-bg:   #0a0c19;
    --code-bg-2: #12162a;

    --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-md: 0 4px 14px rgba(0, 0, 0, .45);
    --sh-lg: 0 16px 38px rgba(0, 0, 0, .55);
    --sh-brand: 0 8px 22px rgba(63, 97, 242, .38);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:            #0e1020;
  --bg-alt:        #12152a;
  --surface:       #171a30;
  --surface-2:     #1d2139;
  --surface-3:     #252a46;
  --border:        #2b3152;
  --border-strong: #3b4370;

  --text:      #eef0fa;
  --text-soft: #b6bdd8;
  --text-mute: #8790b0;

  --brand-50: #1a1f3d;
  --info-bg:  #1a2145;
  --ok-bg:    #102c26;
  --warn-bg:  #2e2411;
  --danger-bg:#31151f;
  --warn:     #fbbf24;
  --ok:       var(--mint-400);
  --danger:   var(--rose-400);
  --info:     var(--brand-300);

  --code-bg:   #0a0c19;
  --code-bg-2: #12162a;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-md: 0 4px 14px rgba(0, 0, 0, .45);
  --sh-lg: 0 16px 38px rgba(0, 0, 0, .55);
  --sh-brand: 0 8px 22px rgba(63, 97, 242, .38);

  color-scheme: dark;
}