/* ============================================================
   KARIGOR IT ACADEMY — DESIGN TOKENS
   Liquid Glass · Apple-inspired restraint · Bengali-first
   ============================================================ */

:root {
  /* ---- Color: named palette (6 core hues) ---- */
  --ink-navy:      #0A1428;   /* deepest text / dark surfaces */
  --royal:         #1E4FD8;   /* primary brand blue */
  --cobalt-glow:   #2F6FED;   /* secondary / gradient mid-tone */
  --sky-ice:       #BFE3FF;   /* light tint, glass highlight */
  --cyan-spark:    #4DD9E8;   /* accent glow — used sparingly */
  --cloud:         #F7FAFF;   /* page background, clean near-white */
  --cloud-tint:    #EEF4FF;   /* alternating section tint */

  --white:         #FFFFFF;
  --grey-900:      #10192E;
  --grey-700:      #3C4B66;
  --grey-500:      #6B7A96;
  --grey-300:      #B9C4D6;
  --grey-100:      #E7EDF6;

  /* ---- Accent (used sparingly — warm counterpoint on light sections) ---- */
  --accent-orange:      #FF8A4C;
  --accent-orange-soft: #FFB37A;
  --accent-bright:      #0EA5E9;   /* bright sky-blue accent, 10MS-style pop */

  /* ---- Gradients ---- */
  --grad-hero:     linear-gradient(135deg, #0A1428 0%, #163875 42%, #1E4FD8 78%, #2F6FED 100%);
  --grad-brand:    linear-gradient(120deg, var(--royal) 0%, var(--cobalt-glow) 55%, var(--cyan-spark) 100%);
  --grad-ice:      linear-gradient(160deg, var(--sky-ice) 0%, var(--cloud) 100%);
  --grad-glow-spot: radial-gradient(circle, rgba(77,217,232,0.35) 0%, rgba(77,217,232,0) 70%);
  --grad-glow-orange: radial-gradient(circle, rgba(255,127,54,0.55) 0%, rgba(255,161,102,0.18) 45%, rgba(255,138,76,0) 72%);
  --grad-card:     linear-gradient(155deg, #FFFFFF 0%, #EAF1FF 48%, #D6E6FF 100%);

  /* ---- Glass surfaces ---- */
  --glass-fill-light:   rgba(255, 255, 255, 0.55);
  --glass-fill-dark:    rgba(16, 25, 46, 0.45);
  --glass-fill-navbar:  rgba(255, 255, 255, 0.62);
  --glass-border:       rgba(255, 255, 255, 0.55);
  --glass-border-dark:  rgba(255, 255, 255, 0.18);
  --glass-highlight:    rgba(255, 255, 255, 0.85);
  --glass-blur:         18px;
  --glass-blur-sm:      10px;
  --glass-shadow:       0 8px 32px rgba(16, 34, 74, 0.14), 0 1.5px 0 rgba(255,255,255,0.6) inset;
  --glass-shadow-dark:  0 8px 40px rgba(3, 8, 20, 0.45), 0 1.5px 0 rgba(255,255,255,0.12) inset;

  /* ---- Typography ---- */
  --font-bn:     'Anek Bangla', 'Noto Sans Bengali', sans-serif;
  --font-en:     'Plus Jakarta Sans', 'Anek Bangla', sans-serif;
  --font-data:   'Space Grotesk', 'Anek Bangla', 'Plus Jakarta Sans', sans-serif;

  --fs-hero:      clamp(2.1rem, 5.4vw, 4.2rem);
  --fs-h1:        clamp(1.9rem, 3.6vw, 3rem);
  --fs-h2:        clamp(1.5rem, 2.6vw, 2.2rem);
  --fs-h3:        clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-body-lg:   1.15rem;
  --fs-body:      1rem;
  --fs-sm:        0.875rem;
  --fs-xs:        0.75rem;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --section-pad: clamp(64px, 9vw, 128px);
  --container-w: 1240px;

  /* ---- Radius ---- */
  --radius-sm:  12px;
  --radius-md:  20px;
  --radius-lg:  28px;
  --radius-xl:  36px;
  --radius-pill: 999px;

  /* ---- Shadow (non-glass) ---- */
  --shadow-card:    0 2px 10px rgba(16, 34, 74, 0.06), 0 12px 32px rgba(16, 34, 74, 0.08);
  --shadow-card-hi: 0 8px 24px rgba(16, 34, 74, 0.10), 0 24px 56px rgba(16, 34, 74, 0.14);

  /* ---- Motion ---- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-med:   320ms;
  --dur-slow:  620ms;

  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}