/* ==========================================================================
   Smart Recharge — Design Tokens
   সোর্স অফ ট্রুথ: প্রোটোটাইপ (smart-recharge-app-ui)
   ব্যবহার: <link rel="stylesheet" href="/assets/ui/tokens.css">
   নোট: কোনো হার্ডকোডেড ডোমেইন নয় — সব path relative
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --primary:        #106050;  /* মূল সবুজ */
  --primary-dark:   #0b463a;  /* গাঢ় সবুজ (হোভার/হেডার) */
  --primary-deep:   #08382e;  /* গভীর সবুজ (হিরো ব্যান্ড) */
  --primary-soft:   #e7f2ee;  /* হালকা সবুজ টিন্ট (আইকন বক্স, সিলেক্টেড) */
  --primary-mist:   #f2f7f5;  /* সবচেয়ে হালকা সবুজ টিন্ট */

  /* ---- Neutrals ---- */
  --bg:             #f7f9f8;  /* অ্যাপ ব্যাকগ্রাউন্ড */
  --surface:        #ffffff;  /* কার্ড / শিট / ইনপুট */
  --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 (প্রোটোটাইপ টোকেন) ---- */
  --radius-sm:      10px;     /* ছোট: চিপ, ইনপুট-ইনার */
  --radius-md:      14px;     /* মাঝারি: ইনপুট, ছোট কার্ড */
  --radius-lg:      20px;     /* বড়: কার্ড */
  --radius-btn:      16px;     /* বাটন */
  --radius-xl:      26px;     /* শিট টপ */
  --radius-pill:    999px;    /* পিল / ব্যাজ */
  --radius-round:   50%;      /* গোল: অ্যাভাটার, আইকন বাটন */

  /* ---- Typography ---- */
  --font-main:      "Hind Siliguri", "Noto Sans Bengali", "Inter", system-ui, sans-serif;
  --font-latin:     "Inter", "Hind Siliguri", system-ui, sans-serif;

  --fs-xs:          11px;
  --fs-sm:          12.5px;
  --fs-base:        13.5px;
  --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.3;
  --lh-base:        1.5;

  /* ---- Spacing scale ---- */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           20px;
  --sp-6:           24px;
  --sp-8:           32px;

  /* ---- 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 (প্রোটোটাইপ) ---- */
  --shadow-card:    0 1px 2px rgba(16, 42, 36, .05),
                   0 8px 24px -16px rgba(16, 42, 36, .18);
  --shadow-card-lg: 0 2px 4px rgba(16, 42, 36, .06),
                   0 16px 40px -20px rgba(16, 42, 36, .22);
  --shadow-sheet:   0 -8px 32px -12px rgba(16, 42, 36, .25);
  --shadow-toast:   0 8px 24px -8px rgba(16, 42, 36, .30);
  --shadow-btn:     0 6px 16px -8px rgba(16, 96, 80, .55);

  /* ---- Elegant gradients (soft, corporate — loud নয়) ---- */
  --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 (রেফারেন্স) ---- */
  --bp-sm:          640px;
  --bp-md:          900px;
}

/* ---- ঐচ্ছিক ডার্ক মোড ---- */
[data-theme="dark"] {
  --bg:             #0c1311;
  --surface:        #141d1a;
  --text:           #e8efec;
  --text-2:         #93a69f;
  --muted:          #5d6f69;
  --border:         #24322e;
  --border-soft:    #1a2521;
  --primary-soft:   #123b32;
  --primary-mist:   #0f2f28;
  --success-soft:   #103b36;
  --warning-soft:   #3d2f14;
  --error-soft:     #3d1a18;
  --info-soft:      #1a2440;
  --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);
}