/* ============================================================
   SmartPekua — Design Tokens (CSS Custom Properties)
   tokens.json থেকে জেনারেট করা। যেকোনো ফ্রেমওয়ার্কে সরাসরি import করা যাবে।
   ব্যবহার:  @import "./fonts.css";  @import "./tokens.css";
   ============================================================ */

:root {
  /* ---------- Primitive: সাগর-সবুজ (Primary) ---------- */
  --sp-primary-50:  #E9F6F0;
  --sp-primary-100: #C7E9DA;
  --sp-primary-200: #95D6BC;
  --sp-primary-300: #5DBF9D;
  --sp-primary-400: #2AA07C;
  --sp-primary-500: #0B6E4F;
  --sp-primary-600: #0A5E44;
  --sp-primary-700: #084B36;
  --sp-primary-800: #063929;
  --sp-primary-900: #04261B;

  /* ---------- Primitive: বঙ্গোপসাগর নীল (Accent) ---------- */
  --sp-accent-50:  #E8F5F9;
  --sp-accent-100: #C3E6EF;
  --sp-accent-200: #8FCFE1;
  --sp-accent-300: #54B2CD;
  --sp-accent-400: #2591B2;
  --sp-accent-500: #0E7490;
  --sp-accent-600: #0C6079;
  --sp-accent-700: #0A4C60;
  --sp-accent-800: #073848;
  --sp-accent-900: #05252F;

  /* ---------- Primitive: বালুকাবেলা (Sand) ---------- */
  --sp-sand-50:  #FDFBF7;
  --sp-sand-100: #F8F3E9;
  --sp-sand-200: #F0E7D5;
  --sp-sand-300: #E3D5BB;
  --sp-sand-400: #CDB995;
  --sp-sand-500: #B39A70;

  /* ---------- Primitive: ঐতিহ্য সোনালি ---------- */
  --sp-gold-300: #E8C87A;
  --sp-gold-500: #C9922B;
  --sp-gold-700: #96690F;

  /* ---------- Status ---------- */
  --sp-danger-100:  #FDE5E5;  --sp-danger-500:  #D62828;  --sp-danger-700:  #A11B1B;
  --sp-warning-100: #FEF3D7;  --sp-warning-500: #E0A100;  --sp-warning-700: #A87400;
  --sp-success-100: #E3F7E9;  --sp-success-500: #1B9E4B;  --sp-success-700: #127038;
  --sp-info-100:    #E4EEFD;  --sp-info-500:    #2563EB;  --sp-info-700:    #1A47B0;

  /* ---------- Neutral ---------- */
  --sp-neutral-0:   #FFFFFF;
  --sp-neutral-50:  #F7F7F6;
  --sp-neutral-100: #EFEFED;
  --sp-neutral-200: #DEDEDA;
  --sp-neutral-300: #C4C4BF;
  --sp-neutral-400: #9A9A94;
  --sp-neutral-500: #75756F;
  --sp-neutral-600: #57574F;
  --sp-neutral-700: #3E3E38;
  --sp-neutral-800: #2A2A26;
  --sp-neutral-900: #161614;

  /* ---------- Semantic (Light — ডিফল্ট) ---------- */
  --sp-bg-page:        var(--sp-sand-50);
  --sp-bg-surface:     var(--sp-neutral-0);
  --sp-bg-subtle:      var(--sp-sand-100);
  --sp-bg-inverse:     var(--sp-primary-900);
  --sp-text-primary:   var(--sp-neutral-900);
  --sp-text-secondary: var(--sp-neutral-600);
  --sp-text-muted:     var(--sp-neutral-500);
  --sp-text-inverse:   var(--sp-neutral-0);
  --sp-text-link:      var(--sp-primary-600);
  --sp-border:         var(--sp-neutral-200);
  --sp-border-strong:  var(--sp-neutral-300);
  --sp-brand:          var(--sp-primary-500);
  --sp-brand-hover:    var(--sp-primary-600);
  --sp-overlay:        rgba(4, 38, 27, 0.55);

  /* ---------- Typography ---------- */
  --sp-font-display: "Anek Bangla", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --sp-font-body:    "Hind Siliguri", "Noto Sans Bengali", "Anek Bangla", system-ui, sans-serif;
  --sp-font-latin:   "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --sp-font-mono:    "JetBrains Mono", Consolas, monospace;

  /* Type scale — Major Third (1.25), 16px base */
  --sp-fs-display-lg: 3.052rem;
  --sp-fs-display:    2.441rem;
  --sp-fs-h1:         1.953rem;
  --sp-fs-h2:         1.563rem;
  --sp-fs-h3:         1.25rem;
  --sp-fs-body-lg:    1.125rem;
  --sp-fs-body:       1rem;
  --sp-fs-sm:         0.875rem;
  --sp-fs-caption:    0.8rem;

  /* বাংলা লিপির জন্য বাড়তি line-height (matra + যুক্তাক্ষর ক্লিয়ারেন্স) */
  --sp-lh-tight:  1.3;
  --sp-lh-head:   1.4;
  --sp-lh-body:   1.75;
  --sp-lh-loose:  1.85;

  /* ---------- Space (4px base) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  /* ---------- Radius ---------- */
  --sp-radius-sm: 6px;
  --sp-radius-md: 10px;
  --sp-radius-lg: 16px;
  --sp-radius-xl: 24px;
  --sp-radius-full: 999px;

  /* ---------- Shadow ---------- */
  --sp-shadow-sm: 0 1px 2px rgba(4, 38, 27, 0.06);
  --sp-shadow-md: 0 4px 12px rgba(4, 38, 27, 0.08);
  --sp-shadow-lg: 0 12px 32px rgba(4, 38, 27, 0.10);
  --sp-shadow-focus: 0 0 0 3px rgba(42, 160, 124, 0.45);

  /* ---------- Layout ---------- */
  --sp-container: 1200px;
  --sp-container-narrow: 760px;
  --sp-gutter: 16px;
  --sp-header-h: 72px;

  /* ---------- Motion ---------- */
  --sp-dur-fast: 120ms;
  --sp-dur-base: 200ms;
  --sp-dur-slow: 320ms;
  --sp-ease: cubic-bezier(0.2, 0, 0, 1);
  --sp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1024px) {
  :root { --sp-gutter: 24px; }
}

/* ============================================================
   Dark theme — সিস্টেম প্রেফারেন্স + ম্যানুয়াল টগল, দুটোই সাপোর্টেড
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sp-bg-page:        #0F1512;
    --sp-bg-surface:     #161D1A;
    --sp-bg-subtle:      #1E2724;
    --sp-bg-inverse:     #E9F6F0;
    --sp-text-primary:   #ECEFEC;
    --sp-text-secondary: #B4BDB8;
    --sp-text-muted:     #8A948E;
    --sp-text-inverse:   #0F1512;
    --sp-text-link:      var(--sp-primary-300);
    --sp-border:         #2A3531;
    --sp-border-strong:  #3A4742;
    --sp-brand:          var(--sp-primary-300);
    --sp-brand-hover:    var(--sp-primary-200);
    --sp-overlay:        rgba(0, 0, 0, 0.65);
    --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --sp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --sp-bg-page:        #0F1512;
  --sp-bg-surface:     #161D1A;
  --sp-bg-subtle:      #1E2724;
  --sp-bg-inverse:     #E9F6F0;
  --sp-text-primary:   #ECEFEC;
  --sp-text-secondary: #B4BDB8;
  --sp-text-muted:     #8A948E;
  --sp-text-inverse:   #0F1512;
  --sp-text-link:      var(--sp-primary-300);
  --sp-border:         #2A3531;
  --sp-border-strong:  #3A4742;
  --sp-brand:          var(--sp-primary-300);
  --sp-brand-hover:    var(--sp-primary-200);
  --sp-overlay:        rgba(0, 0, 0, 0.65);
  --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --sp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Base — বাংলা-ফার্স্ট রিসেট
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sp-bg-page);
  color: var(--sp-text-primary);
  font-family: var(--sp-font-body);
  font-size: var(--sp-fs-body);
  line-height: var(--sp-lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ইংরেজি মোডে ল্যাটিন ফন্ট প্রাইমারি হবে */
html[lang="en"] body { font-family: var(--sp-font-latin); line-height: 1.6; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { font-family: var(--sp-font-latin); }

h1, h2, h3, h4 {
  font-family: var(--sp-font-display);
  line-height: var(--sp-lh-head);
  font-weight: 600;
  margin: 0 0 var(--sp-4);
  letter-spacing: 0;   /* বাংলায় letter-spacing কখনো দেবেন না — matra ভেঙে যায় */
}
h1 { font-size: var(--sp-fs-h1); font-weight: 700; }
h2 { font-size: var(--sp-fs-h2); }
h3 { font-size: var(--sp-fs-h3); font-family: var(--sp-font-body); }

p { margin: 0 0 var(--sp-4); max-width: 68ch; }

a { color: var(--sp-text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sp-brand-hover); }

:focus-visible {
  outline: none;
  box-shadow: var(--sp-shadow-focus);
  border-radius: var(--sp-radius-sm);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ওয়াইড কনটেন্ট (টেবিল/ম্যাপ) নিজের ভেতরে স্ক্রল করবে, পেজ নয় */
.sp-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Utility — বাংলা সংখ্যা রেন্ডারিং
   <span class="sp-num-bn">১২৩</span> অথবা JS হেল্পার ব্যবহার করুন
   ============================================================ */
.sp-num-bn { font-family: var(--sp-font-body); font-variant-numeric: normal; }
.sp-num-en { font-family: var(--sp-font-latin); font-variant-numeric: tabular-nums; }

.sp-container {
  width: 100%;
  max-width: var(--sp-container);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}
.sp-container--narrow { max-width: var(--sp-container-narrow); }

.sp-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}