/*
Theme Name: Dinopips
Theme URI: https://dinopips.com
Author: احمد پوررستمی
Author URI: https://sabkekar.ir
Description: قالب اختصاصی سایت Dinopips — آموزش، کتاب مصور، کتاب صوتی و چک‌لیست
Version: 1.1.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dinopips
Tags: rtl-language, education, custom-colors, custom-logo, dark-layout, featured-images
*/

/* ══════════════════════════════════════════
   ۱. پالت رنگ خام (raw palette)
   مقادیر hex — فقط اینجا تغییر می‌کنند
   از Customizer بازنویسی می‌شوند
   ══════════════════════════════════════════ */
:root {

    /* ─── رنگ‌های برند ─── */
    --dp-raw-teal:          #00E5CC;   /* accent اصلی */
    --dp-raw-teal-dark:     #00CCBB;
    --dp-raw-teal-deeper:   #008F82;

    --dp-raw-purple:        #6450FF;   /* رنگ دوم */
    --dp-raw-purple-dark:   #4D3BDD;

    --dp-raw-amber:         #FFAA44;   /* رنگ سوم */
    --dp-raw-amber-dark:    #E6912A;

    --dp-raw-danger:        #FF4D4D;
    --dp-raw-success:       #00CC88;

    /* ─── پس‌زمینه‌ها (تم تاریک) ─── */
    --dp-raw-bg-base:       #0D0D14;   /* عمیق‌ترین لایه */
    --dp-raw-bg-surface:    #12121E;   /* کارت‌ها */
    --dp-raw-bg-elevated:   #16162A;   /* کارت hover / لایه بالاتر */
    --dp-raw-bg-overlay:    #1C1C30;   /* مودال overlay */

    /* ─── متن ─── */
    --dp-raw-text-bright:   #FFFFFF;
    --dp-raw-text-primary:  #E8E8F0;
    --dp-raw-text-secondary:#9090B0;
    --dp-raw-text-muted:    #55556A;
    --dp-raw-text-disabled: #33334A;

    /* ─── بوردر ─── */
    --dp-raw-border:        #1E1E35;
    --dp-raw-border-glow:   rgba(0,229,204,0.20);
    --dp-raw-border-strong: #2A2A44;
}

/* ══════════════════════════════════════════
   ۲. متغیرهای معنایی (semantic tokens)
   کامپوننت‌ها فقط اینا رو می‌خونن
   ══════════════════════════════════════════ */
:root {

    /* ─── رنگ اصلی ─── */
    --dp-color-primary:         var(--dp-raw-teal);
    --dp-color-primary-dark:    var(--dp-raw-teal-dark);
    --dp-color-primary-deeper:  var(--dp-raw-teal-deeper);
    --dp-color-primary-dim:     rgba(0,229,204,0.10);
    --dp-color-primary-glow:    rgba(0,229,204,0.06);
    --dp-color-primary-border:  var(--dp-raw-border-glow);
    --dp-color-on-primary:      #0D0D14;   /* متن روی دکمه primary */

    /* ─── رنگ دوم و سوم ─── */
    --dp-color-secondary:       var(--dp-raw-purple);
    --dp-color-secondary-dark:  var(--dp-raw-purple-dark);
    --dp-color-secondary-dim:   rgba(100,80,255,0.12);

    --dp-color-accent:          var(--dp-raw-amber);
    --dp-color-accent-dark:     var(--dp-raw-amber-dark);
    --dp-color-accent-dim:      rgba(255,170,68,0.12);

    /* ─── وضعیت ─── */
    --dp-color-danger:          var(--dp-raw-danger);
    --dp-color-danger-dim:      rgba(255,77,77,0.12);
    --dp-color-success:         var(--dp-raw-success);
    --dp-color-success-dim:     rgba(0,204,136,0.12);

    /* ─── پس‌زمینه ─── */
    --dp-bg-body:               var(--dp-raw-bg-base);
    --dp-bg-card:               var(--dp-raw-bg-surface);
    --dp-bg-card-hover:         var(--dp-raw-bg-elevated);
    --dp-bg-overlay:            var(--dp-raw-bg-overlay);
    --dp-bg-white:              var(--dp-raw-bg-elevated);  /* در تم تاریک "سفید" = elevated */

    /* ─── متن ─── */
    --dp-text-bright:           var(--dp-raw-text-bright);
    --dp-text-primary:          var(--dp-raw-text-primary);
    --dp-text-secondary:        var(--dp-raw-text-secondary);
    --dp-text-muted:            var(--dp-raw-text-muted);
    --dp-text-disabled:         var(--dp-raw-text-disabled);
    --dp-text-on-primary:       var(--dp-color-on-primary);

    /* ─── بوردر ─── */
    --dp-border-color:          var(--dp-raw-border);
    --dp-border-strong:         var(--dp-raw-border-strong);
    --dp-border-glow:           var(--dp-raw-border-glow);

    /* ─── شعاع گوشه ─── */
    --dp-radius-xs:   4px;
    --dp-radius-sm:   6px;
    --dp-radius-md:   10px;
    --dp-radius-lg:   16px;
    --dp-radius-xl:   24px;
    --dp-radius-pill: 999px;

    /* ─── تایپوگرافی ─── */
    --dp-font-primary:      'Vazirmatn', system-ui, sans-serif;
    --dp-font-size-xs:      12px;
    --dp-font-size-sm:      13px;
    --dp-font-size-base:    15px;
    --dp-font-size-lg:      17px;
    --dp-font-size-xl:      20px;
    --dp-font-size-2xl:     26px;
    --dp-font-size-3xl:     34px;
    --dp-font-size-4xl:     46px;
    --dp-line-height:       1.7;
    --dp-line-height-tight: 1.25;
    --dp-font-weight-base:  400;
    --dp-font-weight-bold:  700;
    --dp-font-weight-black: 900;

    /* ─── فاصله ─── */
    --dp-space-xs:  4px;
    --dp-space-sm:  8px;
    --dp-space-md:  16px;
    --dp-space-lg:  24px;
    --dp-space-xl:  40px;
    --dp-space-2xl: 64px;
    --dp-space-3xl: 96px;

    /* ─── سایه (در تم تاریک گلو داریم نه shadow) ─── */
    --dp-shadow-sm:  0 0 0 1px var(--dp-border-color);
    --dp-shadow-md:  0 0 0 1px var(--dp-border-color), 0 4px 24px rgba(0,0,0,0.3);
    --dp-shadow-lg:  0 0 0 1px var(--dp-border-color), 0 8px 48px rgba(0,0,0,0.5);
    --dp-glow-sm:    0 0 12px rgba(0,229,204,0.12);
    --dp-glow-md:    0 0 24px rgba(0,229,204,0.18);

    /* ─── ترنزیشن ─── */
    --dp-transition:      0.18s ease;
    --dp-transition-slow: 0.3s ease;

    /* ─── عرض محتوا ─── */
    --dp-container-max:    1140px;
    --dp-container-wide:   1380px;
    --dp-container-narrow: 760px;

    /* ─── هدر ─── */
    --dp-header-height: 64px;
    --dp-header-bg:     rgba(13,13,20,0.96);
}

/* ══════════════════════════════════════════
   ۳. ریست پایه
   ══════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--dp-font-size-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    color-scheme: dark;
}

body {
    font-family: var(--dp-font-primary);
    font-size: var(--dp-font-size-base);
    font-weight: var(--dp-font-weight-base);
    line-height: var(--dp-line-height);
    color: var(--dp-text-primary);
    background-color: var(--dp-bg-body);
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--dp-color-primary); text-decoration: none; transition: color var(--dp-transition); }
a:hover { color: var(--dp-color-primary-dark); }

h1,h2,h3,h4,h5,h6 {
    font-family: var(--dp-font-primary);
    font-weight: var(--dp-font-weight-black);
    line-height: var(--dp-line-height-tight);
    color: var(--dp-text-bright);
    margin-bottom: var(--dp-space-md);
}
h1 { font-size: var(--dp-font-size-4xl); }
h2 { font-size: var(--dp-font-size-3xl); }
h3 { font-size: var(--dp-font-size-2xl); }
h4 { font-size: var(--dp-font-size-xl); }
h5 { font-size: var(--dp-font-size-lg); }
h6 { font-size: var(--dp-font-size-base); }

p { margin-bottom: var(--dp-space-md); }
p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════
   ۴. کانتینر
   ══════════════════════════════════════════ */
.dp-container {
    width: 100%;
    max-width: var(--dp-container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--dp-space-lg);
    padding-left: var(--dp-space-lg);
}
.dp-container--wide   { max-width: var(--dp-container-wide); }
.dp-container--narrow { max-width: var(--dp-container-narrow); }