/** * NicotinoShop — Design Tokens * پالت برند نیکوتینو: #33251a · #fcb941 * برای تغییر تم: فقط --C1 / --C3 (و در صورت نیاز بقیه --C*) */ :root { /* === پالت پایه — لایت === */ --C0: #ffffff; --C1: #33251a; --C2: #f8f5f2; --C3: #fcb941; --C4: #e8ddd3; --C5: #9a8578; --C6: #33251a; --C7: #1f1712; --C8: #faf7f4; --C9: #33251a; --C10: #33251aed; --on-primary: #ffffff; --on-accent: #33251a; --on-accent-rgb: 51, 37, 26; --selection-bg: var(--C3); --selection-text: #1a120c; --bs-body-bg: color-mix(in srgb, var(--C2) 68%, var(--C8)); --bs-secondary-bg: color-mix(in srgb, var(--C4) 55%, var(--C0)); /* === شعاع گوشه فرم‌ها و کپچا === */ --bs-border-radius: 0.865rem; --bs-border-radius-sm: 0.865rem; --bs-border-radius-lg: 0.865rem; --captcha-radius: 0.865rem; /* === Bootstrap === */ --bs-primary: var(--C1); --bs-secondary: var(--C3); --bs-primary-rgb: 51, 37, 26; --bs-secondary-rgb: 252, 185, 65; /* === گرادینت‌ها === */ --gradient-brand: linear-gradient(135deg, var(--C1) 0%, color-mix(in srgb, var(--C1) 78%, #403023) 100%); --gradient-brand-hover: linear-gradient(135deg, color-mix(in srgb, var(--C1) 88%, #000) 0%, var(--C1) 100%); --gradient-cta: linear-gradient(135deg, var(--C3) 0%, color-mix(in srgb, var(--C3) 82%, #e5a020) 100%); --gradient-cta-hover: linear-gradient(135deg, color-mix(in srgb, var(--C3) 90%, #fff) 0%, color-mix(in srgb, var(--C3) 75%, #d4922a) 100%); --gradient-promo: linear-gradient(242deg, var(--C1) 0%, color-mix(in srgb, var(--C1) 70%, var(--C3)) 38%, var(--C3) 72%, color-mix(in srgb, var(--C3) 88%, #fff) 100%); --gradient-promo-bg: var(--C3); --gradient-promo-shadow: color-mix(in srgb, var(--C1) 28%, transparent); --gradient-promo-dark-bg: color-mix(in srgb, var(--C7) 94%, #000); --gradient-promo-dark: linear-gradient(242deg, #120d09 0%, var(--C1) 42%, #1a120c 78%, color-mix(in srgb, var(--C1) 65%, #000) 100%); --gradient-toggle-thumb-dark: linear-gradient(135deg, var(--C3) 0%, color-mix(in srgb, var(--C3) 55%, var(--C1)) 100%); --cta-shadow: color-mix(in srgb, var(--C3) 35%, transparent); --cta-shadow-hover: color-mix(in srgb, var(--C3) 48%, transparent); --gradient-image-overlay: linear-gradient(to top, color-mix(in srgb, var(--C7) 92%, #000) 0%, color-mix(in srgb, var(--C1) 38%, transparent) 58%, transparent 100%); --bs-success: #2d8a4e; --bs-success-rgb: 45, 138, 78; --financial-in: #16a34a; --financial-out: #dc3545; --input-focus-ring: 0 0 0 0.25rem color-mix(in srgb, var(--C3) 28%, transparent); /* === کپچا — لایت (hex ثابت برای URL سرور + یکنواختی) === */ --captcha-bg: #f3ebe3; --captcha-bg-end: #e8ddd3; --captcha-text: #33251a; --captcha-text-alt: #c47a18; --captcha-noise: rgba(252, 185, 65, 0.35); --captcha-noise-rgb: 252, 185, 65; /* === لودر === */ --spinner-duration: 0.75s; --spinner-size-xs: 0.875rem; --spinner-size-sm: 1.125rem; --spinner-size-md: 1.375rem; --spinner-size-lg: 2.25rem; --spinner-size-xl: 3rem; --spinner-size-btn: 1.375rem; --spinner-border-xs: 2px; --spinner-border-sm: 2px; --spinner-border-md: 2px; --spinner-border-lg: 3px; --spinner-border-xl: 3px; --spinner-border-btn: 2px; --loader-accent: var(--C1); --loader-accent-dark: var(--C3); --loader-track: rgba(51, 37, 26, 0.08); --loader-track-dark: rgba(255, 255, 255, 0.1); --loader-overlay: color-mix(in srgb, var(--C2) 78%, transparent); --loader-overlay-dark: color-mix(in srgb, var(--C7) 85%, transparent); --btn-loader-track-filled: rgba(51, 37, 26, 0.15); --btn-loader-accent-filled: var(--C1); --btn-loader-track-outline: color-mix(in srgb, var(--C6) 10%, transparent); --btn-loader-accent-outline: var(--C1); --btn-loader-track-outline-dark: rgba(255, 255, 255, 0.14); --btn-loader-accent-outline-dark: var(--C3); --skeleton-base: color-mix(in srgb, var(--C4) 45%, var(--C0)); --skeleton-shine: color-mix(in srgb, var(--C4) 70%, var(--C0)); --skeleton-base-dark: color-mix(in srgb, var(--C7) 60%, #1a120c); --skeleton-shine-dark: color-mix(in srgb, var(--C4) 35%, #4a3628); /* === روزشمار شگفت‌انگیز (کارت محصول) === */ --dc-track-bg: color-mix(in srgb, var(--C3) 11%, var(--C8)); --dc-track-border: color-mix(in srgb, var(--C3) 36%, var(--C4)); --dc-badge-color: color-mix(in srgb, var(--C3) 68%, var(--C1)); --dc-val-color: var(--C1); --dc-lbl-color: var(--C5); --dc-sep-color: color-mix(in srgb, var(--C3) 48%, var(--C5)); /* === بج تعداد دسته در /fa/category/ === */ --category-count-badge-bg: var(--gradient-brand); --category-count-badge-color: var(--on-primary); /* === هدر و فوتر (ثابت در دارک) === */ --header-C1: var(--C1); --header-C2: var(--C2); --header-C10: var(--C10); --footer-bg: var(--C7); --footer-C1: var(--C1); --footer-C2: var(--C2); --footer-C6: var(--C6); } :root[data-bs-theme="dark"] { /* === پالت پایه — دارک (مثل Kenzo: C2 سطح تیره، C6 متن روشن) === */ --C0: #1a120c; --C1: #33251a; --C2: #2a2018; --C3: #fcb941; --C4: #4a3628; --C5: #c4b0a3; --C6: #f5f0eb; --C7: #120d09; --C8: #1a120c; --C9: #33251a; --C10: #33251af5; --selection-bg: var(--C3); --selection-text: var(--C1); color-scheme: dark; --bs-body-bg: var(--C8); --bs-secondary-bg: color-mix(in srgb, var(--C4) 55%, var(--C7)); --bs-primary-rgb: 51, 37, 26; --bs-secondary-rgb: 252, 185, 65; --gradient-promo-title-dark: color-mix(in srgb, var(--C6) 15%, var(--C3)); --financial-in: #22c55e; --financial-out: #f87171; --input-focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--C3) 34%, transparent); --btn-focus-ring-rgb: var(--on-accent-rgb); /* === کپچا — دارک === */ --captcha-bg: #2a2018; --captcha-bg-end: #1f1712; --captcha-text: #fcb941; --captcha-text-alt: #f8f5f2; --captcha-noise: rgba(252, 185, 65, 0.28); --captcha-noise-rgb: 252, 185, 65; --dc-track-bg: color-mix(in srgb, var(--C3) 17%, var(--C7)); --dc-track-border: color-mix(in srgb, var(--C3) 44%, var(--C4)); --dc-badge-color: color-mix(in srgb, var(--C3) 78%, #fff); --dc-val-color: color-mix(in srgb, var(--C3) 32%, var(--C6)); --dc-lbl-color: var(--C5); --dc-sep-color: color-mix(in srgb, var(--C3) 42%, transparent); --category-count-badge-bg: linear-gradient(135deg, color-mix(in srgb, var(--C3) 55%, var(--C1)) 0%, var(--C3) 100%); --category-count-badge-color: var(--on-primary); --header-C1: #33251a; --header-C2: #f5f0eb; --header-C10: #33251af0; --footer-bg: #1a120c; --footer-C1: #33251a; --footer-C2: #f5f0eb; --footer-C6: #f5f0eb; }