/* ============================================================
   City Tours & Travels — Design System ("Navy & Saffron: Trusted Passage")
   The ONE source of truth for colour, type, spacing, radius, shadow and motion.
   site.css consumes these tokens only — no raw colours or sizes there.

   Palette is derived from the logo: navy blue + saffron orange.
   Admin → Site Settings colours still win: _Layout emits --brand-primary /
   --brand-accent / --brand-dark (and html.theme-custom) when the admin has
   picked colours other than the old seeded defaults.
   ============================================================ */

:root {
    /* ---- Brand: primary — Horizon Navy ---- */
    --c-primary-50:  #EAF1F9;
    --c-primary-100: #D3E2F2;
    --c-primary-200: #A9C4E4;
    --c-primary-500: #1B5FA8;   /* the logo blue — links, icons (6.1:1 on page bg) */
    --c-primary-700: #0F3B68;   /* base — buttons, dark panels (white text 11.4:1) */
    --c-primary-800: #0C2E52;
    --c-primary-900: #0B1B2E;   /* ink — headings, footer */

    /* ---- Brand: accent — Saffron ---- */
    --c-accent-50:  #FEF3E6;
    --c-accent-100: #FDE3C4;
    --c-accent-500: #F28C1E;    /* the logo orange — CTA fill, ALWAYS with navy text (7.1:1) */
    --c-accent-600: #DB7712;
    --c-accent-700: #B45309;    /* accent text on light backgrounds (5.0:1) */

    /* ---- Neutrals: warm ivory → charcoal ---- */
    --c-neutral-0:   #FFFFFF;
    --c-neutral-50:  #FAF8F4;
    --c-neutral-100: #F3EFE7;
    --c-neutral-200: #E7E1D6;
    --c-neutral-300: #D3CBBE;
    --c-neutral-400: #A79F92;
    --c-neutral-500: #7C766C;   /* large text / placeholders only */
    --c-neutral-600: #5E5950;   /* muted body text (6.5:1) */
    --c-neutral-700: #45413A;
    --c-neutral-800: #2C2A26;
    --c-neutral-900: #1A1917;

    /* ---- Semantic ---- */
    --c-success: #15803D;
    --c-danger:  #B91C1C;
    --c-star:    #E8A317;

    /* ---- Third-party brand colours (share buttons, WhatsApp) ---- */
    --c-whatsapp:  #25D366;
    --c-facebook:  #1877F2;
    --c-x:         #000000;
    --c-telegram:  #26A5E4;
    --c-linkedin:  #0A66C2;

    /* ---- Translucent helpers (navy-900 / white based) ---- */
    --c-ink-a06: rgba(11, 27, 46, .06);
    --c-ink-a12: rgba(11, 27, 46, .12);
    --c-ink-a45: rgba(11, 27, 46, .45);
    --c-ink-a70: rgba(11, 27, 46, .70);
    --c-ink-a88: rgba(11, 27, 46, .88);
    --c-white-a08: rgba(255, 255, 255, .08);
    --c-white-a14: rgba(255, 255, 255, .14);
    --c-white-a24: rgba(255, 255, 255, .24);
    --c-white-a60: rgba(255, 255, 255, .60);
    --c-white-a80: rgba(255, 255, 255, .80);
    --c-white-a92: rgba(255, 255, 255, .92);
    --c-accent-a45: rgba(242, 140, 30, .45);

    /* ================= Semantic tokens (what components use) ================= */
    --primary:        var(--brand-primary, var(--c-primary-700));
    --primary-hover:  var(--c-primary-800);
    --primary-soft:   var(--c-primary-50);
    --primary-line:   var(--c-primary-100);
    --accent:         var(--brand-accent, var(--c-accent-500));
    --accent-hover:   var(--c-accent-600);
    --accent-soft:    var(--c-accent-50);
    --accent-text:    var(--c-accent-700);
    --on-accent:      var(--c-primary-900);
    --dark:           var(--brand-dark, var(--c-primary-900));

    --bg:             var(--c-neutral-50);
    --surface:        var(--c-neutral-0);
    --surface-alt:    var(--c-neutral-100);
    --border:         var(--c-neutral-200);
    --border-strong:  var(--c-neutral-300);

    --text:           var(--c-primary-900);
    --text-body:      var(--c-neutral-800);
    --text-muted:     var(--c-neutral-600);
    --text-subtle:    var(--c-neutral-500);
    --text-inverse:   var(--c-neutral-0);
    --text-inverse-muted: var(--c-white-a80);
    --link:           var(--c-primary-500);
    --link-hover:     var(--c-primary-700);

    --focus-ring: 0 0 0 3px var(--c-accent-a45);

    /* ================= Typography ================= */
    --font-display-en: "DM Serif Display", Georgia, "Times New Roman", serif;
    --font-sans-en:    "Manrope", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display-bn: "Noto Serif Bengali", "Hind Siliguri", Georgia, serif;
    --font-sans-bn:    "Hind Siliguri", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: var(--font-display-en);
    --font-sans:    var(--font-sans-en);
    --fw-display: 400;      /* DM Serif Display ships one weight */

    --fs-xs:   .8125rem;    /* 13px — badges, legal */
    --fs-sm:   .875rem;     /* 14px — meta */
    --fs-base: clamp(1rem, .97rem + .15vw, 1.0625rem);   /* 16 → 17px body */
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-h4:   1.125rem;
    --fs-h3:   clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
    --fs-h2:   clamp(1.875rem, 1.35rem + 2.1vw, 2.875rem);
    --fs-h1:   clamp(2.375rem, 1.55rem + 3.6vw, 4.25rem);
    --fs-stat: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);

    --lh-tight: 1.12;
    --lh-snug:  1.3;
    --lh-body:  1.65;
    --ls-eyebrow: .14em;

    /* ================= Spacing (4px base) ================= */
    --space-1: .25rem;   /* 4 */
    --space-2: .5rem;    /* 8 */
    --space-3: .75rem;   /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.5rem;   /* 24 */
    --space-6: 2rem;     /* 32 */
    --space-7: 3rem;     /* 48 */
    --space-8: 4rem;     /* 64 */
    --space-9: 6rem;     /* 96 */
    --space-10: 8rem;    /* 128 */
    --section-y: clamp(3.5rem, 2.2rem + 4.5vw, 6rem);    /* 56 → 96px */
    --container-max: 1200px;
    --prose-max: 72ch;
    --tap-min: 48px;

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

    /* ================= Shadows (navy-tinted, soft) ================= */
    --shadow-sm: 0 1px 2px rgba(11, 27, 46, .06), 0 1px 3px rgba(11, 27, 46, .05);
    --shadow-md: 0 12px 28px -12px rgba(11, 27, 46, .20);
    --shadow-lg: 0 28px 56px -20px rgba(11, 27, 46, .30);

    /* ================= Motion — "smooth take-off": calm, never bouncy ================= */
    --dur-fast: 180ms;
    --dur-base: 320ms;
    --dur-slow: 700ms;
    --dur-kenburns: 14s;
    --ease-out: cubic-bezier(.22, .8, .24, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    /* ================= Layers & fixed chrome ================= */
    --z-dock: 990;
    --z-fab: 995;
    --z-backdrop: 998;      /* below the header: the drawer lives INSIDE the header's stacking context */
    --z-header: 1000;
    --z-drawer: 1010;       /* relative to the header context */
    --z-burger: 1015;       /* relative to the header context — stays above the open drawer */
    --z-cookie: 1080;
    --header-h: 76px;
    --dock-h: 64px;

    /* ================= Gradients / overlays ================= */
    --overlay-hero: linear-gradient(100deg, rgba(11, 27, 46, .88) 0%, rgba(11, 27, 46, .62) 42%, rgba(11, 27, 46, .18) 100%);
    --overlay-hero-foot: linear-gradient(180deg, transparent 55%, rgba(11, 27, 46, .55) 100%);
    --overlay-tile: linear-gradient(180deg, rgba(11, 27, 46, 0) 35%, rgba(11, 27, 46, .86) 100%);
    --overlay-page: linear-gradient(115deg, rgba(11, 27, 46, .92) 0%, rgba(15, 59, 104, .78) 100%);
    --overlay-page-tall: linear-gradient(180deg, rgba(11, 27, 46, .35) 0%, rgba(11, 27, 46, .88) 100%);
    --overlay-hero-mobile: linear-gradient(180deg, rgba(11, 27, 46, .55) 0%, rgba(11, 27, 46, .86) 100%);
    --overlay-card-media: linear-gradient(180deg, rgba(11, 27, 46, .25) 0%, transparent 30%, transparent 60%, rgba(11, 27, 46, .55) 100%);
    --grad-dark-panel: linear-gradient(135deg, var(--c-primary-700) 0%, var(--c-primary-900) 100%);
}

/* Bengali mode: Bengali type pairing, taller leading, never letter-spaced or uppercased */
html[lang="bn"] {
    --font-display: var(--font-display-bn);
    --font-sans: var(--font-sans-bn);
    --fw-display: 600;
    --lh-body: 1.75;
    --lh-tight: 1.3;
    --lh-snug: 1.45;
    --ls-eyebrow: 0;
}

/* Admin-customised theme: derive tints from the admin's three colours */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    html.theme-custom {
        --primary-hover: color-mix(in srgb, var(--primary) 82%, black);
        --primary-soft:  color-mix(in srgb, var(--primary) 8%, white);
        --primary-line:  color-mix(in srgb, var(--primary) 18%, white);
        --accent-hover:  color-mix(in srgb, var(--accent) 88%, black);
        --accent-soft:   color-mix(in srgb, var(--accent) 9%, white);
        --grad-dark-panel: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
    }
}