/* =========================================================
   Shiri Visual — Design Tokens  v0.4  (1405-08-08 / 2026-10-30)
   منبع واحد رنگ، فونت، فاصله و گوشه. همه‌ی قالب‌ها این فایل را import می‌کنند.
   v0.3: ویترین تیره، تیتر نمایشی + Instrument Serif، حرکت، نسبت تصویر (DECISIONS-v0.3.md)
   v0.4: رابط نرم — خط‌های میست، گوشه‌ی ۳/۶، دکمه‌ها به ترتیب اهمیت، میست و شیشه، فونت رابط وزیرمتن (soft-components.html)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap");

/* ---------- Lahzeh — فونت فارسی برند (لایسنس «وب‌سایت یا نرم‌افزار شخصی» فونت‌ایران؛ فقط برای پروژه‌های خود استودیو، فایل را به دیگران ندهید) ----------
   نسخه‌ی NoEn: فقط حروف و ارقام فارسی؛ متن لاتین خودکار با Manrope نمایش داده می‌شود.
   وزن‌ها: ExtraLight 200، Regular 400، Bold 700، ExtraBold 800. وزن‌های میانی به نزدیک‌ترین فایل نگاشت شده‌اند. */
@font-face { font-family: "Lahzeh"; font-weight: 200 300; font-style: normal; font-display: swap;
  src: url("../00-brand/fonts/lahzeh/web/Lahzeh-NoEn-ExtraLight.woff2") format("woff2"), url("../00-brand/fonts/lahzeh/web/Lahzeh-NoEn-ExtraLight.woff") format("woff"); }
@font-face { font-family: "Lahzeh"; font-weight: 400 500; font-style: normal; font-display: swap;
  src: url("../00-brand/fonts/lahzeh/web/Lahzeh-NoEn-Regular.woff2") format("woff2"), url("../00-brand/fonts/lahzeh/web/Lahzeh-NoEn-Regular.woff") format("woff"); }
@font-face { font-family: "Lahzeh"; font-weight: 600 700; font-style: normal; font-display: swap;
  src: url("../00-brand/fonts/lahzeh/web/Lahzeh-NoEn-Bold.woff2") format("woff2"), url("../00-brand/fonts/lahzeh/web/Lahzeh-NoEn-Bold.woff") format("woff"); }
@font-face { font-family: "Lahzeh"; font-weight: 800 900; font-style: normal; font-display: swap;
  src: url("../00-brand/fonts/lahzeh/web/Lahzeh-NoEn-ExtraBold.woff2") format("woff2"), url("../00-brand/fonts/lahzeh/web/Lahzeh-NoEn-ExtraBold.woff") format("woff"); }

:root {
  /* ---------- Palette (raw) ---------- */
  --sv-brand-teal:      #537170; /* رنگ اصلی لوگو (دقیق) — Primary */
  --sv-deep-moss:       #22312F; /* متن اصلی، پس‌زمینه‌ی تیره */
  --sv-deep-teal:       #3E5C5A; /* حالت hover/فشرده‌ی Primary */
  --sv-sage:            #8FA59D; /* کمکی */
  --sv-mist:            #C9D3CF; /* خطوط و پرشدگی‌ها */
  --sv-paper:           #F2F0EB; /* پس‌زمینه به‌جای سفید خالص */
  --sv-concrete:        #8A8D86; /* متن کم‌رنگ */
  --sv-copper:          #A86F4C; /* تأکید نادر */
  --sv-white:           #FFFFFF;
  --sv-black:           #000000; /* فقط برای نسخه‌ی تک‌رنگ لوگو */

  /* ---------- Semantic (light) ---------- */
  --color-bg:            var(--sv-paper);
  --color-surface:       #FAF9F6;
  --color-surface-alt:   #E7EAE6;
  --color-text:          var(--sv-deep-moss);
  --color-text-muted:    #5E625C;          /* 5.5:1 روی Paper */
  --color-text-subtle:   #6A6D66;          /* 4.6:1 — Concrete خام (3:1) فقط برای متن درشت یا تزئینی */
  --color-primary:       var(--sv-brand-teal); /* 4.65:1 روی Paper */
  --color-primary-hover: var(--sv-deep-teal);
  --color-on-primary:    var(--sv-white);  /* 5.3:1 */
  --color-secondary:     var(--sv-sage);
  --color-border:        var(--sv-mist);   /* فقط خط تزئینی */
  --color-border-strong: #738A83;          /* 3.2:1 — مرز اجزای قابل کلیک */
  --color-accent:        var(--sv-copper); /* پرشدگی و خط */
  --color-accent-text:   #8E5A3B;          /* 5:1 — متن مسی */
  --color-focus:         var(--sv-copper);

  /* ---------- Typography ---------- */
  --font-fa:   "Lahzeh", "Manrope", "Vazirmatn", Tahoma, sans-serif; /* Lahzeh برای فارسی؛ لاتین داخل متن فارسی → Manrope؛ Vazirmatn پشتیبان */
  --font-en:   "Manrope", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace; /* برچسب‌ها — هم‌خانواده با wordmark لوگو */
  --font-body: "Manrope", "Segoe UI", "Lahzeh", "Vazirmatn", sans-serif;
  --font-serif-en: "Instrument Serif", Georgia, serif; /* فقط تیتر انگلیسی — هم‌خانواده با سریف مونوگرام */
  --font-fa-ui: "Vazirmatn", "Manrope", "Lahzeh", Tahoma, sans-serif; /* v0.4: رابط و اسناد فارسی (اپ حسابداری، فاکتور) — بازمتن، در PDF هم مجاز */

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.25rem;   /* 20 */
  --fs-lg:   1.5625rem; /* 25 */
  --fs-xl:   1.953rem;  /* 31 */
  --fs-2xl:  2.441rem;  /* 39 */
  --fs-3xl:  3.052rem;  /* 49 */
  --fs-4xl:  4rem;      /* 64 — تیتر نمایشی: صفحه‌ی داخلی، بخش سایت */
  --fs-5xl:  5rem;      /* 80 */
  --fs-6xl:  6rem;      /* 96 — جلد پورتفولیو، هیروی سایت */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-fa: 1.9;          /* فارسی فضای عمودی بیشتری لازم دارد */
  --lh-display: 1.05;    /* تیتر نمایشی لاتین؛ فارسی نمایشی: 1.25 */
  --tracking-label: 0.28em; /* فاصله‌ی حروف مثل SHIRI VISUAL در لوگو */

  /* ---------- Spacing (8pt) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- Radius — معماری: گوشه‌ی تیز، گردی فقط برای دایره‌ی لوگو ---------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-full: 999px;
  --radius-soft: 3px;   /* v0.4: دکمه، برچسب، فیلد */
  --radius-panel: 6px;  /* v0.4: پنل، شیشه، جدول میست، کشو */

  /* ---------- Lines & elevation ---------- */
  --border-hair: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-text);
  --shadow-1: 0 1px 2px rgb(34 49 47 / 0.06), 0 4px 16px rgb(34 49 47 / 0.06);

  /* ---------- v0.4 رابط نرم: پایه‌ها (مقادیر مشتق پایین‌تر در «:root, .sv-showcase») ---------- */
  --mist-base:          var(--sv-mist);  /* میست و خط نرم از این ساخته می‌شوند */
  --line-firm-base:     var(--sv-sage);
  --btn-primary:        var(--sv-deep-teal); /* دکمه‌ی اصلی یک پله تیره‌تر از تیل لوگو */
  --btn-primary-hover:  #304846;
  --on-btn-primary:     var(--sv-white);
  --glass:              rgb(250 249 246 / .52);
  --glass-hover:        rgb(250 249 246 / .70);
  --glass-line:         rgb(255 255 255 / .60);
  --glass-ink:          #1C2927;
  --glass-blur:         blur(16px) saturate(140%);
  --glass-lift:         inset 0 1px 0 rgb(255 255 255 / .55), 0 8px 24px rgb(22 31 30 / .14);
  --btn-h-sm: 28px;
  --btn-h:    34px;
  --btn-h-lg: 40px;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --page-a4-w: 210mm;
  --page-a4-h: 297mm;

  /* ---------- Showcase — ویترین تیره (سایت، پورتفولیو، شوریل)؛ مستقل از تم ---------- */
  --showcase-bg:      #161F1E;              /* سبز-سیاه */
  --showcase-surface: var(--sv-deep-moss);
  --showcase-text:    var(--sv-paper);      /* 15:1 */
  --showcase-muted:   #B4BDB9;              /* 9:1 */
  --showcase-line:    #34504C;
  --showcase-accent:  #C68B66;              /* مس روی تیره، 5.8:1 — فقط تأکید نادر */
  --showcase-fade:    linear-gradient(180deg, rgb(22 31 30 / .75) 0%, transparent 20%, transparent 60%, #161F1E 100%);

  /* ---------- Motion ---------- */
  --dur-fast:   150ms;   /* hover، رنگ و مرز */
  --dur-base:   250ms;   /* باز و بسته شدن، فیلتر */
  --dur-slow:   600ms;   /* ورود تصویر */
  --dur-reveal: 1200ms;  /* اینترو لوگو، تیتر جلد */
  --ease-out:    cubic-bezier(.2, .7, .2, 1);   /* ورود: سریع شروع، آرام فرود */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);  /* حرکت دوربین‌وار، اسلاید */

  /* ---------- Aspect ratios ---------- */
  --ratio-wide:     16 / 9;   /* سایت، ویدیو، پروژه */
  --ratio-cinema:   2.39 / 1; /* کادر سینمایی، هیرو */
  --ratio-card:     4 / 3;    /* کارت پروژه */
  --ratio-portrait: 4 / 5;    /* پست اینستاگرام */
  --ratio-story:    9 / 16;   /* استوری و ریلز */
  --ratio-square:   1 / 1;
}

/* ---------- Dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #161F1E;
    --color-surface:       var(--sv-deep-moss);
    --color-surface-alt:   #2B3B39;
    --color-text:          var(--sv-paper);
    --color-text-muted:    #B4BDB9;
    --color-text-subtle:   #8C9894;
    --color-primary:       #8FB0A8;
    --color-primary-hover: #A9C4BD;
    --color-on-primary:    var(--sv-deep-moss);
    --color-border:        #34504C;
    --color-border-strong: var(--sv-brand-teal);
    --color-accent:        #C68B66;
    --color-accent-text:   #C68B66;
    --color-focus:         #C68B66;
    --mist-base: #4A6460; --line-firm-base: #5F7B76;
    --btn-primary: #8FB0A8; --btn-primary-hover: #A9C4BD; --on-btn-primary: var(--sv-deep-moss);
    --glass: rgb(34 49 47 / .42); --glass-hover: rgb(34 49 47 / .60); --glass-line: rgb(255 255 255 / .14); --glass-ink: var(--sv-paper);
    --glass-lift: inset 0 1px 0 rgb(255 255 255 / .08), 0 10px 28px rgb(0 0 0 / .35);
  }
}
:root[data-theme="dark"] {
  --color-bg:            #161F1E;
  --color-surface:       var(--sv-deep-moss);
  --color-surface-alt:   #2B3B39;
  --color-text:          var(--sv-paper);
  --color-text-muted:    #B4BDB9;
  --color-text-subtle:   #8C9894;
  --color-primary:       #8FB0A8;
  --color-primary-hover: #A9C4BD;
  --color-on-primary:    var(--sv-deep-moss);
  --color-border:        #34504C;
  --color-border-strong: var(--sv-brand-teal);
  --color-accent:        #C68B66;
  --color-accent-text:   #C68B66;
  --color-focus:         #C68B66;
  --mist-base: #4A6460; --line-firm-base: #5F7B76;
  --btn-primary: #8FB0A8; --btn-primary-hover: #A9C4BD; --on-btn-primary: var(--sv-deep-moss);
  --glass: rgb(34 49 47 / .42); --glass-hover: rgb(34 49 47 / .60); --glass-line: rgb(255 255 255 / .14); --glass-ink: var(--sv-paper);
  --glass-lift: inset 0 1px 0 rgb(255 255 255 / .08), 0 10px 28px rgb(0 0 0 / .35);
}

/* ---------- v0.4 رابط نرم: مقادیر مشتق — روی هر دو ریشه تعریف می‌شوند تا داخل .sv-showcase هم از پایه‌ی تیره ساخته شوند ---------- */
:root, .sv-showcase {
  --line-soft: color-mix(in srgb, var(--mist-base) 48%, transparent);      /* بین ردیف‌ها */
  --line:      color-mix(in srgb, var(--mist-base) 85%, transparent);      /* زیر سرستون، دور فیلد */
  --line-firm: color-mix(in srgb, var(--line-firm-base) 75%, transparent); /* فقط بالای جمع */
  --mist-1:    color-mix(in srgb, var(--mist-base) 26%, transparent);      /* پرشدگی آرام: دکمه‌ی میست، ردیف یکی‌درمیان، hover */
  --mist-2:    color-mix(in srgb, var(--mist-base) 46%, transparent);      /* سرستون میست، hover میست */
  --tint-1:    color-mix(in srgb, var(--color-primary) 9%, transparent);   /* دکمه‌ی رنگی کم‌رنگ، برچسب «پرداخت‌شده» */
  --tint-2:    color-mix(in srgb, var(--color-primary) 15%, transparent);
  --copper-1:  color-mix(in srgb, var(--color-accent) 12%, transparent);   /* برچسب «معوق» */
  --btn-primary-glass: color-mix(in srgb, var(--btn-primary) 82%, transparent); /* دکمه‌ی اصلی فقط روی تصویر */
}

/* ---------- Direction ---------- */
[dir="rtl"], :lang(fa) {
  --font-body: var(--font-fa), var(--font-en);
}
[dir="rtl"] body, body[dir="rtl"] { line-height: var(--lh-fa); }

/* ---------- Base behaviour (همه‌ی قالب‌ها) ---------- */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ویترین تیره: هر بخشی با این کلاس، توکن‌های معنایی را تیره می‌کند (همه‌ی اجزا داخلش درست کار می‌کنند) */
.sv-showcase {
  --color-bg:            var(--showcase-bg);
  --color-surface:       var(--showcase-surface);
  --color-surface-alt:   #2B3B39;
  --color-text:          var(--showcase-text);
  --color-text-muted:    var(--showcase-muted);
  --color-text-subtle:   #8C9894;
  --color-primary:       #8FB0A8;
  --color-primary-hover: #A9C4BD;
  --color-on-primary:    var(--sv-deep-moss);
  --color-border:        var(--showcase-line);
  --color-border-strong: var(--sv-brand-teal);
  --color-accent:        var(--showcase-accent);
  --color-accent-text:   var(--showcase-accent);
  --color-focus:         var(--showcase-accent);
  --mist-base: #4A6460; --line-firm-base: #5F7B76;
  --btn-primary: #8FB0A8; --btn-primary-hover: #A9C4BD; --on-btn-primary: var(--sv-deep-moss);
  --glass: rgb(34 49 47 / .42); --glass-hover: rgb(34 49 47 / .60); --glass-line: rgb(255 255 255 / .14); --glass-ink: var(--sv-paper);
  background: var(--showcase-bg);
  color: var(--showcase-text);
}

/* لوگوی دایره‌ای در کادر کوچک (هدر، سربرگ): دایره را کادر پر می‌کند */
.sv-logo-round { border-radius: var(--radius-full); overflow: hidden; display: inline-block; flex: none; }
.sv-logo-round img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }

/* ---------- Print / PDF (پروپوزال، فاکتور، پورتفولیو) ---------- */
@page { size: A4; margin: 14mm; }
@media print {
  :root { color-scheme: light; }
  body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
}