/* ===========================================================================
   কাশফুল একাডেমি — "Sharat Stage" design tokens
   The single source of truth for colour, type, space, radius, shadow and motion.
   site.css consumes ONLY these variables — no literal colours or sizes there.

   Brand hues come from Site Settings: _Layout injects --brand-primary /
   --brand-accent / --brand-ink inline. Every working shade is derived from them
   with color-mix(), so any colour an admin saves stays WCAG-AA readable.
   =========================================================================== */
:root {
    /* ---- Brand inputs (overridden inline by _Layout) ---- */
    --brand-primary: #0E8F46;
    --brand-accent: #E0271C;
    --brand-ink: #141A15;

    /* ---- Primary · kash-leaf green (static fallbacks; derived below) ---- */
    --p-50:  #EAF5EE;
    --p-100: #CFE8D8;
    --p-500: #0E8F46;   /* logo green — icons, illustration, type ≥ 24px */
    --p-600: #0B7A3C;   /* buttons + links: white text 5.4:1 */
    --p-700: #09652F;   /* hover */
    --p-900: #123D24;   /* "night stage" — hero, CTA band */

    /* ---- Accent · sindoor red — the admission CTA and nothing else ---- */
    --a-50:  #FDECEB;
    --a-500: #E0271C;
    --a-600: #C52219;   /* CTA: white text 5.8:1 */
    --a-700: #A61D15;

    /* ---- Neutrals · kash silk → night ink (lean toward the brand green) ---- */
    --n-0:   #FFFFFF;
    --n-50:  #F7F7F1;   /* page ground — never pure white */
    --n-100: #EEEFE6;   /* alternate section */
    --n-200: #E0E2D6;   /* hairlines */
    --n-300: #C8CBBC;   /* input borders */
    --n-400: #9EA293;   /* decorative only */
    --n-500: #767B6C;   /* large meta only (4:1) */
    --n-600: #585D50;   /* smallest text colour allowed (6.3:1) */
    --n-700: #3F4439;
    --n-800: #262B23;   /* body text */
    --n-900: #141A15;   /* headings */

    /* ---- Ornament + on-dark ---- */
    --gold: #A8802E;            /* trophies, stars — not a brand colour */
    --gold-soft: #F2C94C;       /* focus ring on dark grounds */
    --plume: #F3EFE2;           /* kash-plume ivory: text + art on night grounds */
    --plume-72: rgb(243 239 226 / .78);
    --plume-40: rgb(243 239 226 / .45);
    --plume-16: rgb(243 239 226 / .16);
    --plume-08: rgb(243 239 226 / .08);
    --gold-50: #F6EFDF;
    --whatsapp: #1FA855;
    --glow: rgb(14 143 70 / .38);
    --veil: linear-gradient(180deg, rgb(20 26 21 / 0) 50%, rgb(20 26 21 / .38) 100%);

    /* ---- Semantic roles ---- */
    --bg: var(--n-50);
    --surface: var(--n-0);
    --surface-alt: var(--n-100);
    --line: var(--n-200);
    --line-strong: var(--n-300);
    --text: var(--n-800);
    --text-strong: var(--n-900);
    --text-muted: var(--n-600);
    --link: var(--p-600);
    --link-hover: var(--p-700);
    --night: var(--p-900);
    --footer-bg: var(--brand-ink);
    --scrim: rgb(20 26 21 / .88);
    --focus: var(--p-600);

    /* ---- Typography ---- */
    --font-display: 'Literata', 'Noto Serif Bengali', Georgia, 'Times New Roman', serif;
    --font-body: 'Plus Jakarta Sans', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-sign: 'Galada', 'Noto Serif Bengali', cursive;
    --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --fs-xs: .8125rem;                                        /* 13 — badges only */
    --fs-sm: .9375rem;                                        /* 15 — meta, captions */
    --fs-base: 1.0625rem;                                     /* 17 — body */
    --fs-md: 1.1875rem;                                       /* 19 — lead */
    --fs-lg: 1.375rem;                                        /* 22 */
    --fs-h3: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);        /* 20–26 */
    --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);            /* 28–40 */
    --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.5rem);               /* 32–56 */
    --fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);       /* 36–64 */
    --fs-stat: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    --fs-kicker: clamp(1.125rem, 1rem + .5vw, 1.375rem);

    --lh-tight: 1.15;
    --lh-heading: 1.25;
    --lh-heading-bn: 1.42;
    --lh-body: 1.68;
    --lh-body-bn: 1.82;
    --tracking-label: .06em;

    /* ---- Space · 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 */
    --sp-10: 8rem;    /* 128 */

    --section-y: var(--sp-9);
    --section-y-sm: var(--sp-8);
    --container-max: 1200px;
    --gutter: var(--sp-4);
    --measure: 68ch;

    /* ---- Sizes ---- */
    --tap: 48px;
    --tap-sm: 40px;
    --icon-circle: 2.75rem;
    --header-h: 84px;
    --logo-h: 60px;
    --logo-h-scrolled: 46px;
    --float-size: 52px;
    --thumb-w: 7rem;
    --date-chip-w: 4.25rem;
    --avatar: 3rem;
    --avatar-lg: 7.5rem;
    --play-size: 4.75rem;
    --arch-max: 26rem;
    --arch-max-sm: 17rem;
    --founder-max: 27.5rem;
    --partner-h: 3.5rem;
    --hero-min-h: 36rem;
    --media-min-h: 17.5rem;
    --toast-w: 24rem;
    --cookie-w: 22rem;
    --accent-bar: 4px;
    --accent-seg: 7.5rem;
    --ring: 4px;
    --outline: 3px;
    --plume-art-w: 26rem;
    --art-hero-w: 46rem;
    --art-cta-w: 18rem;
    --art-footer-w: 34rem;
    --tap-lg: 3.5rem;
    --textarea-min-h: 8.5rem;
    --map-min-h: 22rem;
    --menu-min-w: 12rem;
    --lead-max: 36rem;
    --copy-max: 40rem;
    --head-max: 44rem;
    --thumb-w-sm: 5.5rem;
    --dot-w: 1.75rem;
    --dot-w-active: 2.75rem;
    --close-size: 2rem;

    /* ---- Icon glyph sizes ---- */
    --icon-xs: 1.1rem;
    --icon-sm: 1.2rem;
    --icon-md: 1.25rem;
    --icon-float: 1.35rem;
    --icon-fb: 1.4rem;
    --icon-lg: 1.6rem;
    --icon-xl: 2rem;
    --icon-2xl: 2.5rem;
    --glyph-quote: 4.5rem;

    /* ---- Control padding ---- */
    --btn-pad-y: .75rem;
    --btn-pad-x: 1.35rem;
    --btn-pad-y-sm: .45rem;
    --btn-pad-x-sm: 1rem;
    --btn-pad-y-lg: .95rem;
    --btn-pad-x-lg: 1.75rem;
    --pill-pad: .2rem .7rem;

    /* ---- Effects ---- */
    --frame-w: 8px;       /* white frame around arch portraits */
    --frame-w-sm: 6px;
    --halo-w: 10px;       /* ring around the hero arch */
    --blur-header: 12px;
    --nudge: 8px;         /* enter/leave offset for toasts + back-to-top */

    /* ---- Radius · by role ---- */
    --r-xs: 6px;
    --r-sm: 8px;      /* inputs, badges */
    --r-btn: 12px;    /* buttons */
    --r-md: 14px;     /* cards */
    --r-lg: 24px;     /* media, feature panels */
    --r-pill: 999px;  /* chips only */
    --r-arch: 50% 50% var(--r-md) var(--r-md) / 38% 38% var(--r-md) var(--r-md);  /* the stage arch */

    /* ---- Borders ---- */
    --bw: 1px;
    --bw-strong: 1.5px;

    /* ---- Shadow · green-ink tinted ---- */
    --sh-1: 0 1px 2px rgb(20 26 21 / .06), 0 2px 8px rgb(20 26 21 / .04);
    --sh-2: 0 14px 34px -14px rgb(20 26 21 / .24);
    --sh-3: 0 30px 60px -24px rgb(20 26 21 / .36);
    --sh-cta: 0 10px 24px -12px rgb(197 34 25 / .75);

    /* ---- Motion · "Sharat breeze": slow, soft, never bouncy ---- */
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-1: 160ms;
    --dur-2: 320ms;
    --dur-3: 700ms;
    --dur-zoom: 600ms;
    --dur-kenburns: 14s;
    --dur-sway: 7s;
    --stagger: 70ms;
    --lift: -4px;
    --reveal-shift: 16px;

    /* ---- Layers ---- */
    --z-header: 1030;
    --z-float: 1040;
    --z-cookie: 1045;
    --z-toast: 1080;
    --z-lightbox: 2000;

    /* ---- Bootstrap bridge (utilities like .text-dark / .text-danger follow the palette) ---- */
    --bs-dark-rgb: 20, 26, 21;
    --bs-danger-rgb: 197, 34, 25;
    --bs-light-rgb: 238, 239, 230;
    --bs-primary-rgb: 11, 122, 60;
    --bs-success-rgb: 11, 122, 60;

    /* ---- Legacy aliases (inline styles in older views still reference --ci-*) ---- */
    --ci-primary: var(--p-600);
    --ci-primary-dark: var(--p-700);
    --ci-accent: var(--a-600);
    --ci-ink: var(--n-900);
    --ci-cream: var(--n-100);
    --ci-card: var(--surface);
    --ci-brass: var(--gold);
    --ci-muted: var(--n-600);
    --ci-line: var(--n-200);
}

/* Derive every working shade from the admin-chosen brand colours. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --p-50:  color-mix(in srgb, var(--brand-primary) 9%, #fff);
        --p-100: color-mix(in srgb, var(--brand-primary) 20%, #fff);
        --p-500: var(--brand-primary);
        --p-600: color-mix(in srgb, var(--brand-primary) 85%, #000);
        --p-700: color-mix(in srgb, var(--brand-primary) 70%, #000);
        --p-900: color-mix(in srgb, var(--brand-primary) 30%, #141A15);
        --a-50:  color-mix(in srgb, var(--brand-accent) 8%, #fff);
        --a-500: var(--brand-accent);
        --a-600: color-mix(in srgb, var(--brand-accent) 88%, #000);
        --a-700: color-mix(in srgb, var(--brand-accent) 74%, #000);
        --glow: color-mix(in srgb, var(--brand-primary) 40%, transparent);
    }
}

@media (max-width: 991.98px) {
    :root {
        --section-y: var(--sp-8);
        --section-y-sm: var(--sp-7);
        --header-h: 72px;
        --logo-h: 52px;
        --logo-h-scrolled: 44px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --section-y: 3.5rem;   /* 56 */
        --section-y-sm: 2.5rem;
        --header-h: 64px;
        --logo-h: 46px;
        --logo-h-scrolled: 40px;
        --float-size: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-1: 1ms;
        --dur-2: 1ms;
        --dur-3: 1ms;
        --dur-zoom: 1ms;
        --lift: 0px;
        --reveal-shift: 0px;
    }
}