/* ========================================================================== Smart Recharge — Design Tokens সোর্স অফ ট্রুথ: প্রোটোটাইপ (smart-recharge-app-ui) ব্যবহার: নোট: কোনো হার্ডকোডেড ডোমেইন নয় — সব path relative ========================================================================== */ :root { /* ---- Brand ---- */ --primary: #106050; /* মূল সবুজ */ --primary-dark: #0b463a; /* গাঢ় সবুজ (হোভার/হেডার) */ --primary-deep: #08382e; /* গভীর সবুজ (হিরো ব্যান্ড) */ --primary-soft: #e7f2ee; /* হালকা সবুজ টিন্ট (আইকন বক্স, সিলেক্টেড) */ --primary-mist: #f2f7f5; /* সবচেয়ে হালকা সবুজ টিন্ট */ /* ---- Neutrals ---- */ --bg: #ffffff; /* পেজের মেইন ব্যাকগ্রাউন্ড — পিওর হোয়াইট (v113, আতিক ভাই); কার্ডের রঙ আগের মতোই */ --surface: #ffffff; /* কার্ড / শিট / ইনপুট */ --surface-2: #f7f9f8; /* TK-2: দ্বিতীয় সারফেস (সেকশন-ভেতর, ইনপুট-ব্যাকগ্রাউন্ড) */ --section-bg: #f2f7f5; /* TK-2: সেকশন-ব্যাকগ্রাউন্ড (primary-mist-এর সিম্যান্টিক নাম) */ --text: #15211d; /* মূল লেখা */ --text-2: #43554f; /* সেকেন্ডারি লেখা */ --muted: #71827c; /* মিউটেড লেখা / হিন্ট */ --border: #e3eae7; /* বর্ডার / ডিভাইডার */ --border-soft: #edf2f0; /* হালকা ডিভাইডার */ /* ---- Semantic ---- */ --success: #0f766e; --success-soft: #e6f4f1; --warning: #e8a33d; --warning-soft: #fdf3e2; --error: #d9534f; --error-soft: #fdeeed; --info: #3366a3; --info-soft: #eef0fd; /* ---- Radius (v117 ডিজাইন সিস্টেম — নির্দিষ্ট সিঁড়ি, এর বাইরে নয়) ---- */ --radius-sm: 8px; /* ছোট: চিপ, ইনপুট-ইনার */ --radius-md: 12px; /* মাঝারি: ইনপুট, বাটন */ --radius-lg: 16px; /* বড়: কার্ড */ --radius-btn: 12px; /* বাটন */ --radius-xl: 20px; /* শিট টপ */ --radius-pill: 999px; /* পিল / ব্যাজ */ /* F-US-18 (2026-11-09): tokens defined for values components.css/KycPage referenced before they existed (previously undefined var() fallbacks). */ --text-1: #15211d; --bg-subtle: #f7f9f8; --primary-ghost: #e7f2ee; --danger: #c0392b; --danger-soft: #f5c6cb; --danger-ghost: #fdf0f0; --border-strong: #b9d4cc; --warning-dark: #9a6a1a; --warning-text: #92400e; --warning-icon: #d97706; --warning-border: #fde68a; --orange-dark: #b25e1b; --orange-soft: #fef1e6; --radius-round: 50%; /* গোল: অ্যাভাটার, আইকন বাটন */ /* ---- Typography ---- */ --font-main: "Hind Siliguri", "Noto Sans Bengali", "Inter", system-ui, sans-serif; --font-latin: "Inter", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif; /* TK-2 (ফন্ট-লকইন): টাকার সংখ্যা — Hind Siliguri-প্রথম। Inter-প্রথম নিয়ম বাতিল (বাংলা-সংখ্যা Inter-এ নেই, ফলব্যাক-নির্ভরতা ভাঙত); Hind-এ বাংলা+লাতিন দুই সাবসেটই আছে, সংখ্যা সব জায়গায় এক ফন্টে। */ --font-amount-num: "Hind Siliguri", "Noto Sans Bengali", "Inter", system-ui, sans-serif; /* TK-2: সংখ্যা-মাত্র স্ট্যাক (পরিমাণ/গণনা) — Hind-প্রথম, amount-num-এর মতোই। */ --font-num: "Hind Siliguri", "Noto Sans Bengali", "Inter", system-ui, sans-serif; --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.35; --lh-base: 1.6; /* বাংলা লেখার জন্য (গবেষণা-ভিত্তিক) */ /* ---- Spacing scale ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* ---- Card (ফেজ-৩, 2026-11-02: একটাই কার্ড-সংজ্ঞা — মান বর্তমান চূড়ান্ত রেন্ডার-মান, বানানো নয়: বর্ডার components .sr-card থেকে, শ্যাডো admin.css 9b-র !important-চূড়ান্ত মান, রেডিয়াস 16px, প্যাডিং .sr-card-pad, গ্যাপ admin-card-stack, হেড-মার্জিন .sr-card-head) ---- */ --card-border: 1px solid var(--border-soft); --card-radius: 16px; --card-shadow: 0 4px 16px rgba(15, 23, 20, 0.05); --card-pad: 16px; --card-gap: 16px; --card-head-margin: 12px; /* ---- Layout ---- */ --page-max: 480px; /* মোবাইল-ফার্স্ট কনটেন্ট প্রস্থ */ --page-max-tab: 720px; /* ট্যাবলেট */ --page-max-desk: 1140px; /* ডেস্কটপ — পুরো স্ক্রিন বুদ্ধিমত্তায় ব্যবহার */ --header-h: 56px; --bottomnav-h: 64px; --input-h: 52px; --touch-min: 44px; /* ন্যূনতম টাচ টার্গেট */ /* ---- Shadows (v117: কার্ড/বাটনে শ্যাডো নয় — হেয়ারলাইন ডিভাইডারই গভীরতা দেয়; শ্যাডো শুধু ভাসমান উপাদানে, নিরপেক্ষ রঙে) ---- */ /* v130 (আতিক ভাই): সফট শ্যাডো হুবহু আগের প্রিমিয়াম অবস্থায় ফেরত — v117-এর ফ্ল্যাট করা (none) বাতিল; রঙ/গভীরতা আগের মতোই। */ /* TK-2 (ডিজাইন-লকইন): শ্যাডো-রঙ নিউট্রাল rgb(21,33,29) — সবুজ-টিন্ট (16,42,36 / 16,96,80) বাতিল; আলফা/গভীরতা অপরিবর্তিত। */ --shadow-card: 0 1px 2px rgba(21, 33, 29, .05), 0 8px 24px -16px rgba(21, 33, 29, .18); --shadow-card-lg: 0 2px 4px rgba(21, 33, 29, .06), 0 16px 40px -20px rgba(21, 33, 29, .22); --shadow-sheet: 0 -8px 32px -12px rgba(21, 33, 29, .25); --shadow-toast: 0 8px 24px -8px rgba(21, 33, 29, .30); --shadow-btn: 0 8px 24px -8px rgba(21, 33, 29, .18); /* Phase U R-10: আলফা .৫৫ → .১৮ (অডিট §২.৪-প্রস্তাব); hue নিউট্রাল TK-2-তেই */ /* ---- সারফেস রঙ (v117: গ্রেডিয়েন্ট বাতিল — ফ্ল্যাট সলিড; টোকেনের নাম আগের রাখা হয়েছে যাতে সব ব্যবহার-জায়গা একসাথে ফ্ল্যাট হয়) ---- */ /* v130 (আতিক ভাই): গ্রেডিয়েন্ট হুবহু আগের প্রিমিয়াম অবস্থায় ফেরত — v117-এর ফ্ল্যাট সলিড বাতিল। */ --grad-hero: linear-gradient(135deg, #0d5245 0%, #106050 55%, #14705c 100%); --grad-hero-deep: linear-gradient(150deg, #08382e 0%, #0b463a 60%, #0d5245 100%); --grad-btn: linear-gradient(180deg, #12836a 0%, #106050 100%); --grad-card-tint: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%); /* ---- Motion (সংযত) ---- */ --dur-fast: 150ms; --dur-base: 220ms; --ease: ease-out; /* ---- Breakpoints (R-34: একটাই সেট — ৩২০/৩৯০/৬৪০/৭৬৮/১০২৪/১২৮০; --bp-* @media-তে ব্যবহার নিষেধ) ---- */ /* Phase U: --bp-md-এর পুরনো 900px মান বাতিল (ব্যবহার ০, grep-যাচাইকৃত) — ক্যানোনিকাল সেটে 900 নেই। */ --bp-xs: 320px; --bp-phone: 390px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } /* ---- ডার্ক মোড (2026-11-09, আইটেম ৯০, F-90-1) ---- সম্পূর্ণ ব্লক: --primary* + সিম্যান্টিক মূল-রং + গ্রেডিয়েন্ট-টোকেন + দ্বিতীয় সারফেস। কনট্রাস্ট: contrast-check.py-তে মাপা (রিপোর্টে)। Q-90-1 কম্পোজ-নিয়ম (ডিফল্ট: সক্রিয় থিমের রং বহাল): theme_css() :root --primary* ইনজেক্ট করে tokens.css-এর পরে — সমান specificity-তে পরের নিয়ম জেতে, তাই সময়-ভিত্তিক থিম সক্রিয় থাকলে তার প্রাইমারি ডার্কেও বহাল থাকে; নিচের মানগুলো ফলব্যাক (থিম-ওভাররাইড না থাকলে)। :root-এ transition নেই (v127-শিক্ষা: ডার্ক-সুইচে ০.৪s ধোয়া-ফ্ল্যাশ নয়)। */ [data-theme="dark"] { --bg: #0c1311; --surface: #141d1a; --surface-2: #1a2521; --section-bg: #122019; --text: #e8efec; --text-2: #93a69f; --muted: #8fa39b; /* V-90 ফিক্স: #5d6f69 ডার্ক-ক্যানভাসে 3.53:1 (FAIL) → #8fa39b 7.06:1 PASS */ --border: #24322e; --border-soft: #1a2521; --primary: #1f9d77; --primary-dark: #157a5c; --primary-deep: #0d5c44; --primary-soft: #123b32; --primary-mist: #0f2f28; --success: #2dd4bf; --success-soft: #103b36; --warning: #f0b45c; --warning-soft: #3d2f14; --error: #f08080; --error-soft: #3d1a18; --info: #6ea8e8; --info-soft: #1a2440; --grad-hero: linear-gradient(135deg, #0d5c44 0%, #1f9d77 55%, #157a5c 100%); --grad-hero-deep: linear-gradient(150deg, #08382e 0%, #0d5c44 60%, #157a5c 100%); --grad-btn: linear-gradient(180deg, #0f7a4e 0%, #0b5e3c 100%); --grad-card-tint: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 100%); --shadow-card: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px -16px rgba(0, 0, 0, .50); --shadow-sheet: 0 -8px 32px -12px rgba(0, 0, 0, .60); --shadow-toast: 0 8px 24px -8px rgba(0, 0, 0, .60); --shadow-btn: 0 8px 24px -8px rgba(0, 0, 0, .50); }