/* Shared by the main site (css/rabiul-blog.css) and the project pages (css/project.css):
   design tokens with dark mode, the .wrap container and the site navbar. Load it first. */

/* ======================================
   VARIABLES
   ====================================== */
:root {
    --text: #1d1d1f;
    --text-muted: #6b6b70;
    --bg-page: #fbfbfd;
    --bg-muted: #eeeef1;    /* panels (code, BibTeX, diagram boxes): about 1.13:1 against the page so they read as panels */
    --border-muted: #d2d2d7;
    --border-hairline: rgba(60, 60, 67, 0.12);
    --line: #86868b;        /* link underlines and control outlines: at least 3:1 against the page */
    --radius: 0;            /* square corners everywhere: panels, buttons, code */
    --radius-soft: var(--radius);
    --radius-pill: var(--radius);
    --focus-ring: var(--text);
    --gradient-era: linear-gradient(
        118deg,
        #0d9488 0%,
        #2563eb 38%,
        #6366f1 58%,
        #9333ea 82%,
        #c026d3 100%
    );
    --navbar-bg: rgba(251, 251, 253, 0.72);
    --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
    --duration: 0.2s;
    --content-link: #1d1d1f;
    --content-link-hover: #0a0a0a;
    --chip-bg: rgba(29, 29, 31, 0.05);
    --chip-bg-hover: rgba(29, 29, 31, 0.11);
    --selection-bg: rgba(29, 29, 31, 0.75);
    --selection-text: #fff;
    color-scheme: light dark;
    --font-sans: "Helvetica Neue", "SolaimanLipi", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
    /* Type scale — single coherent rhythm */
    --text-micro: 0.75rem;
    --text-caption: 0.8125rem;
    --text-small: 0.875rem;
    --text-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* 16px on phones, 17px on desktop */
    --text-secondary: 0.9375rem;   /* captions, notes, metadata: anything people read that is not body */
    --text-body-lg: 1.0625rem;
    --text-subtitle: 1rem;
    --text-lede: 1.125rem;
    --text-title-sm: 1.25rem;
    --text-title-md: 1.375rem;
    --text-title-lg: 1.5rem;
    --text-headline: clamp(1.8125rem, 1.62rem + 0.42vw, 2.125rem);
    --text-display: clamp(1.5625rem, 1.38rem + 0.38vw, 1.8125rem);
    --leading-body: 1.5;
    --leading-prose: 1.55;
    --leading-snug: 1.3;
    --leading-list: 1.45;   /* multi-line entries such as publications */
    --leading-tight: 1.15;
    --leading-display: 1.05;
    --track-display: -0.018em;
    --track-headline: -0.016em;
    --track-title: -0.01em;
    --track-ui: -0.011em;
    --track-normal: 0;
    --track-label: 0.02em;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-section: var(--space-6);
    --space-block: var(--space-4);
    /* Layout — horizontal padding for .wrap / navbar; code blocks bleed full-width on small screens */
    --gutter-x: 16px;
    --col: 680px;           /* the text column on every page: about 75 characters per line */
    /* Section rhythm (named so components don’t rely on calc tricks) */
    --space-about-h2-before: 2.5rem;
    --wrap-max: calc(var(--col) + 2 * var(--gutter-x));
}

/* Dark mode follows the device setting; the project pages (css/project.css) use the same values. */
@media (prefers-color-scheme: dark) {
    :root {
        --text: #ececec;
        --text-muted: #9a9aa0;
        --bg-page: #0d0d0d;
        --bg-muted: #1f1f22;
        --border-muted: #4a4a50;
        --border-hairline: rgba(235, 235, 245, 0.12);
        --line: #6e6e74;
        --navbar-bg: rgba(13, 13, 13, 0.72);
        --content-link: #ececec;
        --content-link-hover: #ffffff;
        --chip-bg: rgba(255, 255, 255, 0.07);
        --chip-bg-hover: rgba(255, 255, 255, 0.13);
        --selection-bg: rgba(236, 236, 236, 0.85);
        --selection-text: #0d0d0d;
    }
}


/* Bengali text: scoped via unicode-range so this only loads/applies to Bengali-script text */
@font-face {
    font-family: "SolaimanLipi";
    src: url("https://cdn.jsdelivr.net/gh/maateen/bangla-web-fonts@master/fonts/solaiman-lipi/solaimanlipi-normal-v1.0.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0980-09FF;
    size-adjust: 110%;      /* SolaimanLipi sits small next to Helvetica; this matches the visual size */
}
@font-face {
    font-family: "SolaimanLipi";
    src: url("https://cdn.jsdelivr.net/gh/maateen/bangla-web-fonts@master/fonts/solaiman-lipi/solaimanlipi-bold-v1.0.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0980-09FF;
    size-adjust: 110%;      /* SolaimanLipi sits small next to Helvetica; this matches the visual size */
}

/* Bangla needs more room between lines for its vowel signs and conjuncts. Posts set lang: bn in front matter. */
:lang(bn) { --leading-body: 1.75; --leading-prose: 1.8; }

/* Buttons: one look for every control on the site (tags, paper links, figure tabs, play).
   Selected state comes from aria-pressed / aria-selected, so it is announced as well as shown. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    min-height: 34px;
    padding: 6px 14px;
    font: 400 var(--text-small)/1.2 var(--font-sans);
    color: var(--text);
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--duration) var(--ease-standard), background-color var(--duration) var(--ease-standard), color var(--duration) var(--ease-standard);
}
.btn:hover { border-color: var(--text); color: var(--text); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn[aria-pressed="true"], .btn[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg-page); }
.btn[aria-disabled="true"] { color: var(--text-muted); border-style: dashed; cursor: default; }
.btn[aria-disabled="true"]:hover { border-color: var(--line); color: var(--text-muted); }
.btn sup { font-size: 0.75em; color: inherit; opacity: 0.7; }

.wrap {
    width: 100%;
    max-width: var(--wrap-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: max(var(--gutter-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter-x), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

/* ======================================
   NAVIGATION
   ====================================== */
.navbar {
    position: relative;
    z-index: 1030;
    padding: var(--space-3) 0;
    background-color: var(--navbar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-hairline);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .navbar { background-color: var(--bg-page); }
}
.navbar-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
}

/* Site name — same large treatment on home (h1 + link) and inner pages (compact link) */
.navbar--home .navbar-brand--home {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.navbar-brand--home a,
.navbar-brand--compact {
    font-size: var(--text-display);
    font-weight: 600;
    line-height: var(--leading-display);
    letter-spacing: var(--track-display);
    color: var(--text);
    text-decoration: none;
    transition: color var(--duration) var(--ease-standard), opacity var(--duration) var(--ease-standard);
}
.navbar-brand--home a:hover,
.navbar-brand--compact:hover { color: var(--text); opacity: 0.85; }

.navbar--home .nav-link,
.navbar--compact .nav-link {
    font-size: var(--text-small);
    font-weight: 400;
}

/* Desktop nav — readable but secondary to page titles (not headline-sized) */
@media (min-width: 768px) {
    .navbar--home .nav-link,
    .navbar--compact .nav-link {
        font-size: var(--text-subtitle);
    }
    .navbar-nav {
        gap: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .navbar--home .nav-link,
    .navbar--compact .nav-link {
        font-size: var(--text-lede);
    }
}

.nav-link {
    line-height: var(--leading-snug);
    letter-spacing: var(--track-normal);
    color: var(--text-muted);
    transition: color var(--duration) var(--ease-standard);
    position: relative;
}
.nav-link:hover { color: var(--text); }
.nav-link.active {
    color: var(--text);
    font-weight: 500;
}
.nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1.5px;
    background: var(--text);
    border-radius: 1px;
}

.navbar-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.2;
    width: 100%;
}
.nav-item { margin: 0; }

.navbar a { text-decoration: none; }