/* =====================================================
   NOGHOTOK DESIGN TOKENS — VIEWER PAGES ONLY
   -------------------------------------------------------
   1. tokens.css is the single source of truth for all
      design values (colors, type scale, spacing, etc.)
   2. All viewer pages import this file first — no
      hardcoded sizes, colors, or spacing anywhere.
   3. Admin pages have separate styles — do NOT import
      this file in admin layouts.
   4. Bengali = default scale; English = smaller scale,
      auto-switched via html[lang="en"].
   5. Class names: lowercase, hyphen-separated only.
      No camelCase. No underscores. No PascalCase.
   6. Use `hidden` attribute over `display:none` where
      possible (better SEO + accessibility).
   7. Use semantic HTML headings (h1–h6) directly —
      not generic wrapper divs with heading-like classes.
   ===================================================== */

/* =====================================================
   BASE HTML FONT SIZE
   16px default; slightly larger on small screens so
   rem-based sizes scale up for Bengali readability.
   ===================================================== */
html {
    font-size: 16px;
}
@media (max-width: 600px) {
    html { font-size: 16.5px; }
}

/* =====================================================
   DESIGN TOKENS
   ===================================================== */
:root {

    /* ===== COLORS ===== */
    --red:          #B5002B;
    --red-dark:     #8A0020;
    --red-soft:     rgba(181, 0, 43, 0.08);
    --gold:         #B8895E;
    --gold-soft:    rgba(184, 137, 94, 0.12);
    --green:        #1D6F1D;
    --green-soft:   rgba(29, 111, 29, 0.10);
    --green-light:  #2D8A2D;
    --amber:        #C2691A;
    --amber-soft:   rgba(194, 105, 26, 0.10);
    --cream:        #FAF6F0;
    --ink:          #1A1612;
    --ink-soft:     #4A413A;
    --ink-muted:    #6B645D;
    --line:         #E8DFD3;
    --line-soft:    #F0EAE0;
    --white:        #FFFFFF;

    /* ===== ENGLISH FONT SCALE (Latin) — REM ===== */
    --fs-en-micro:    0.6875rem;   /* 11px */
    --fs-en-caption:  0.75rem;     /* 12px */
    --fs-en-meta:     0.8125rem;   /* 13px */
    --fs-en-body-sm:  0.875rem;    /* 14px */
    --fs-en-body:     0.9375rem;   /* 15px */
    --fs-en-body-lg:  1rem;        /* 16px */
    --fs-en-h4:       1.0625rem;   /* 17px */
    --fs-en-h3:       1.25rem;     /* 20px */
    --fs-en-h2:       1.5rem;      /* 24px */
    --fs-en-h1:       1.75rem;     /* 28px */
    --fs-en-display:  2.25rem;     /* 36px */
    --fs-en-hero:     3rem;        /* 48px */

    /* ===== BENGALI FONT SCALE — ~10-12% larger ===== */
    --fs-bn-micro:    0.75rem;     /* 12px */
    --fs-bn-caption:  0.8125rem;   /* 13px */
    --fs-bn-meta:     0.875rem;    /* 14px */
    --fs-bn-body-sm:  0.9375rem;   /* 15px */
    --fs-bn-body:     1rem;        /* 16px */
    --fs-bn-body-lg:  1.0625rem;   /* 17px */
    --fs-bn-h4:       1.125rem;    /* 18px */
    --fs-bn-h3:       1.375rem;    /* 22px */
    --fs-bn-h2:       1.625rem;    /* 26px */
    --fs-bn-h1:       1.875rem;    /* 30px */
    --fs-bn-display:  2.5rem;      /* 40px */
    --fs-bn-hero:     3.25rem;     /* 52px */

    /* ===== DEFAULT (Bengali — primary language) ===== */
    --fs-micro:    var(--fs-bn-micro);
    --fs-caption:  var(--fs-bn-caption);
    --fs-meta:     var(--fs-bn-meta);
    --fs-body-sm:  var(--fs-bn-body-sm);
    --fs-body:     var(--fs-bn-body);
    --fs-body-lg:  var(--fs-bn-body-lg);
    --fs-h4:       var(--fs-bn-h4);
    --fs-h3:       var(--fs-bn-h3);
    --fs-h2:       var(--fs-bn-h2);
    --fs-h1:       var(--fs-bn-h1);
    --fs-display:  var(--fs-bn-display);
    --fs-hero:     var(--fs-bn-hero);

    /* ===== LINE HEIGHTS (unitless) ===== */
    --lh-tight:   1.3;
    --lh-snug:    1.45;
    --lh-normal:  1.65;   /* Bengali default — needs breathing room */
    --lh-relaxed: 1.8;

    /* ===== FONT WEIGHTS ===== */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;
    --fw-black:     900;

    /* ===== SPACING (REM — scales with text) ===== */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 3rem;      /* 48px */
    --space-8: 4rem;      /* 64px */

    /* ===== BORDER RADIUS (PX — crisp visuals) ===== */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   20px;
    --r-pill: 100px;

    /* ===== BORDERS (PX) ===== */
    --border-thin:   1px;
    --border-medium: 1.5px;
    --border-thick:  2px;

    /* ===== SHADOWS (PX) ===== */
    --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* ===== LAYOUT ===== */
    --header-h:     56px;
    --bottom-nav-h: 70px;

    /* ===== FONT FAMILIES ===== */
    --font-bn:         'Hind Siliguri', sans-serif;
    --font-bn-display: 'Tiro Bangla', serif;
    --font-num:        'Playfair Display', serif;

    /* ===== TRANSITIONS ===== */
    --t-fast:   0.15s ease;
    --t-normal: 0.25s ease;
}

/* ===== ENGLISH PAGE OVERRIDE ===== */
/* Triggered when <html lang="en"> is set */
html[lang="en"] {
    --fs-micro:    var(--fs-en-micro);
    --fs-caption:  var(--fs-en-caption);
    --fs-meta:     var(--fs-en-meta);
    --fs-body-sm:  var(--fs-en-body-sm);
    --fs-body:     var(--fs-en-body);
    --fs-body-lg:  var(--fs-en-body-lg);
    --fs-h4:       var(--fs-en-h4);
    --fs-h3:       var(--fs-en-h3);
    --fs-h2:       var(--fs-en-h2);
    --fs-h1:       var(--fs-en-h1);
    --fs-display:  var(--fs-en-display);
    --fs-hero:     var(--fs-en-hero);
    --lh-normal:   1.5;
    --lh-relaxed:  1.65;
}

/* ===== INLINE LANGUAGE TAGS ===== */
/* For mixed-language content within a Bengali page */
[lang="en"] { font-size: 0.92em; }
[lang="bn"] { font-size: 1em; }

/* ===== BASE TYPOGRAPHY ===== */
body {
    font-family:  var(--font-bn);
    font-size:    var(--fs-body);
    line-height:  var(--lh-normal);
    color:        var(--ink);
    background:   var(--cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

h1 {
    font-size:   var(--fs-h1);
    line-height: var(--lh-tight);
    font-weight: var(--fw-extrabold);
    color:       var(--ink);
    margin:      0 0 var(--space-4);
}
h2 {
    font-size:   var(--fs-h2);
    line-height: var(--lh-snug);
    font-weight: var(--fw-extrabold);
    color:       var(--ink);
    margin:      0 0 var(--space-3);
}
h3 {
    font-size:   var(--fs-h3);
    line-height: var(--lh-snug);
    font-weight: var(--fw-bold);
    color:       var(--ink);
    margin:      0 0 var(--space-3);
}
h4 {
    font-size:   var(--fs-h4);
    line-height: var(--lh-snug);
    font-weight: var(--fw-bold);
    color:       var(--ink);
    margin:      0 0 var(--space-2);
}
p {
    font-size:   var(--fs-body);
    line-height: var(--lh-relaxed);
    color:       var(--ink-soft);
    margin:      0 0 var(--space-3);
}
small,
.text-small { font-size: var(--fs-body-sm); }

a {
    color: inherit;
    text-decoration: none;
}
a:hover { color: var(--red); }

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ===== SEMANTIC HEADING EYEBROW ===== */
/* Small label displayed above a main heading in a section */
.eyebrow {
    font-size:      var(--fs-meta);
    font-weight:    var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--red);
    margin-bottom:  var(--space-2);
    line-height:    var(--lh-snug);
}

/* ===== TEXT UTILITIES ===== */
.text-muted  { color: var(--ink-muted); }
.text-soft   { color: var(--ink-soft); }
.text-red    { color: var(--red); }
.text-gold   { color: var(--gold); }
.text-green  { color: var(--green); }

/* ===== HIDDEN ATTRIBUTE SUPPORT ===== */
/* Ensure [hidden] always hides elements even if CSS specificity fights it */
[hidden] { display: none !important; }