/* ============================================================
   Rubel Computer — Design System
   The single source of truth for colour, type, spacing, radius,
   shadow, motion and layering. Component styles (site.css,
   motion.css, toasts.css) use ONLY these tokens — no raw hexes.

   Brand inputs (--brand / --action / --ink-deep) come from the
   logo and can be overridden from Admin → Settings (the layout
   injects them). Every tint below is derived from those inputs.
   ============================================================ */

:root {
    /* ---- Brand inputs (logo palette) ---- */
    --brand: #0060A8;        /* Rubel Blue — the logo swoosh */
    --action: #FF7818;       /* Logo orange — buy / call / message actions only */
    --ink-deep: #0B1F3A;     /* deep navy — stats band, footer, dark panels */

    /* ---- Brand + action scales (static fallbacks; derived in @supports below) ---- */
    --brand-50: #EEF5FC;
    --brand-100: #D9E8F6;
    --brand-200: #B3CFEA;
    --brand-300: #80AFD4;
    --brand-700: #004F8A;
    --brand-800: #003D6B;
    --action-50: #FFF3EA;
    --action-600: #E66C16;
    --action-text: #B85611;  /* orange used as TEXT on white — 4.8:1 */
    --action-ink: #0B1F3A;   /* text placed ON an orange fill — 6.4:1 */
    --ink-deep-2: #22344F;   /* raised surface on navy */

    /* ---- Neutral scale (cool graphite, 50–900) ---- */
    --n-0: #FFFFFF;
    --n-50: #F8F9FB;
    --n-100: #F1F3F6;
    --n-200: #E3E7ED;
    --n-300: #CBD2DC;
    --n-400: #9AA4B2;
    --n-500: #646E7E;
    --n-600: #4B5565;
    --n-700: #343C4A;
    --n-800: #1E2533;
    --n-900: #111722;

    /* ---- Semantic colour roles ---- */
    --c-bg: var(--n-50);            /* page — off-white, never pure #fff */
    --c-surface: var(--n-0);        /* cards, panels */
    --c-surface-2: var(--n-100);    /* alternate band, image plates */
    --c-text: var(--n-900);         /* body text — 17:1 */
    --c-text-2: var(--n-600);       /* secondary text — 7.3:1 */
    --c-muted: var(--n-500);        /* meta text — 4.9:1 on --c-bg */
    --c-line: var(--n-200);         /* hairlines, card borders */
    --c-line-2: var(--n-300);       /* input borders, strong dividers */
    --c-on-dark: #EEF2F8;           /* text on --ink-deep */
    --c-on-dark-2: #A9B6C9;         /* secondary text on --ink-deep — 8:1 */
    --c-line-dark: rgba(255, 255, 255, .12);
    --c-ghost-line: rgba(255, 255, 255, .35);      /* outline buttons on navy */
    --c-ghost-line-hover: rgba(255, 255, 255, .7);
    --c-ghost-fill: rgba(255, 255, 255, .10);
    --c-ghost-fill-2: rgba(255, 255, 255, .16);
    --c-scrim: rgba(11, 31, 58, .45);              /* image hover overlay */

    /* ---- Status (each has one job) ---- */
    --c-success: #007A3D;           /* "In stock", "Open now" — 5.4:1 */
    --c-success-bg: #E7F5EE;
    --c-sale: #D71920;              /* sale badges only — white text 5.2:1 */
    --c-sale-bg: #FDECEC;
    --c-warn: #9A5B00;
    --c-warn-bg: #FFF4DB;
    --c-info: var(--brand);
    --c-info-bg: var(--brand-50);

    /* ---- Third-party brand colours (share buttons, WhatsApp) ---- */
    --c-whatsapp: #1FAF54;
    --c-facebook: #1877F2;
    --c-linkedin: #0A66C2;
    --c-x: #111722;
    --c-rating: #F5A524;

    /* ---- Typography ---- */
    --font-display: 'Plus Jakarta Sans', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-bn: 'Noto Sans Bengali', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-xs: .8125rem;                                   /* 13px — badges only */
    --fs-sm: .875rem;                                    /* 14px — meta only, never body */
    --fs-base: 1rem;                                     /* 16px — body minimum */
    --fs-md: 1.125rem;                                   /* 18px */
    --fs-lg: 1.25rem;                                    /* 20px */
    --fs-xl: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);   /* 22–26px */
    --fs-2xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);   /* 28–40px */
    --fs-3xl: clamp(2.125rem, 1.45rem + 2.8vw, 3.5rem);  /* 34–56px */

    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-body: 1.6;
    --tracking-tight: -.02em;
    --tracking-caps: .08em;

    /* ---- Spacing (4px base) ---- */
    --sp-1: .25rem;   /*  4 */
    --sp-2: .5rem;    /*  8 */
    --sp-3: .75rem;   /* 12 */
    --sp-4: 1rem;     /* 16 */
    --sp-5: 1.5rem;   /* 24 */
    --sp-6: 2rem;     /* 32 */
    --sp-7: 3rem;     /* 48 */
    --sp-8: 4rem;     /* 64 */
    --sp-9: 6rem;     /* 96 */
    --section-y: var(--sp-9);
    --gutter: var(--sp-4);

    /* ---- Radius ---- */
    --r-xs: 6px;      /* badges, chips */
    --r-sm: 10px;     /* buttons, inputs */
    --r-md: 14px;     /* cards */
    --r-lg: 20px;     /* hero media, feature panels */
    --r-pill: 999px;

    /* ---- Elevation (navy-tinted, borders do the work at rest) ---- */
    --sh-1: 0 1px 2px rgba(11, 31, 58, .06), 0 1px 1px rgba(11, 31, 58, .03);
    --sh-2: 0 8px 20px -6px rgba(11, 31, 58, .14), 0 2px 4px rgba(11, 31, 58, .05);
    --sh-3: 0 22px 48px -14px rgba(11, 31, 58, .30);
    --sh-up: 0 -6px 20px rgba(11, 31, 58, .08);  /* bottom dock */
    --ring: 0 0 0 3px rgba(0, 96, 168, .32);

    /* ---- Motion: precise & quick ---- */
    --dur-1: 150ms;   /* colour / opacity hovers */
    --dur-2: 220ms;   /* lifts, transforms */
    --dur-3: 450ms;   /* scroll reveals */
    --dur-4: 700ms;   /* hero crossfade */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --lift: -3px;

    /* ---- Layout + layering ---- */
    --container: 1240px;
    --dock-h: 64px;
    --z-header: 1030;
    --z-float: 1040;
    --z-dock: 1045;
    --z-cookie: 1060;
    --z-toast: 2000;

    /* ---- Bootstrap bridge (so Bootstrap components follow the system) ---- */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--c-text);
    --bs-body-bg: var(--c-bg);
    --bs-secondary-color: var(--c-muted);
    --bs-border-color: var(--c-line);
    --bs-border-radius: var(--r-sm);
    --bs-primary-rgb: 0, 96, 168;
    --bs-link-color-rgb: 0, 96, 168;
    --bs-link-hover-color-rgb: 0, 79, 138;
    --bs-success-rgb: 0, 122, 61;
    --bs-danger-rgb: 215, 25, 32;

    /* ---- Legacy aliases — older views still reference --tn-* ---- */
    --tn-primary: var(--brand);
    --tn-primary-700: var(--brand-700);
    --tn-primary-soft: var(--brand-50);
    --tn-accent: var(--action);
    --tn-accent-600: var(--action-600);
    --tn-accent-soft: var(--action-50);
    --tn-ink: var(--c-text);
    --tn-dark: var(--ink-deep);
    --tn-bg: var(--c-bg);
    --tn-surface: var(--c-surface);
    --tn-soft: var(--c-surface-2);
    --tn-muted: var(--c-muted);
    --tn-line: var(--c-line);
    --tn-warn: var(--c-warn);
    --tn-danger: var(--c-sale);
    --tn-success: var(--c-success);
}

/* Derive every tint from the (possibly admin-overridden) brand inputs. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --brand-50: color-mix(in srgb, var(--brand) 7%, #fff);
        --brand-100: color-mix(in srgb, var(--brand) 15%, #fff);
        --brand-200: color-mix(in srgb, var(--brand) 30%, #fff);
        --brand-300: color-mix(in srgb, var(--brand) 50%, #fff);
        --brand-700: color-mix(in srgb, var(--brand) 82%, #000);
        --brand-800: color-mix(in srgb, var(--brand) 64%, #000);
        --action-50: color-mix(in srgb, var(--action) 9%, #fff);
        --action-600: color-mix(in srgb, var(--action) 90%, #000);
        --action-text: color-mix(in srgb, var(--action) 72%, #000);
        --ink-deep-2: color-mix(in srgb, var(--ink-deep) 86%, #fff);
        --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
    }
}

@media (max-width: 991.98px) {
    :root { --section-y: var(--sp-8); }
}
@media (max-width: 767.98px) {
    :root { --section-y: var(--sp-7); }
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip; /* safety net — clip (not hidden) keeps the sticky header working */
}

/* Bengali reads smaller at the same size — give it more room. */
html[lang="bn"] { --font-display: var(--font-bn); --font-body: var(--font-bn); }
html[lang="bn"] body { font-size: 1.0625rem; line-height: 1.75; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--c-text);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 .5em;
}
html[lang="bn"] :is(h1, h2, h3, h4, h5, h6) { letter-spacing: 0; line-height: var(--lh-snug); }

p { margin: 0 0 var(--sp-4); }

a { color: var(--brand); text-decoration: none; transition: color var(--dur-1) var(--ease); }
a:hover { color: var(--brand-700); }

:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 2px; }
::selection { background: var(--brand-100); color: var(--c-text); }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }
.container, .container-fluid { overflow-wrap: break-word; }
h1, h2, h3, h4, p, a, span, li { overflow-wrap: break-word; }

.tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}