/*
 * Islamic Portal design tokens in Learn (Web/IslamicPortal.Learn): the website's shared foundation, loaded first by
 * _Layout like on every site. Learn's own looks and worlds build on these in learn.css and worlds.css.
 */

:root {
  /* Spacing: a 4px rhythm up to 1rem, then wider steps. */
  --ip-space-1: .25rem;
  --ip-space-2: .5rem;
  --ip-space-3: .75rem;
  --ip-space-4: 1rem;
  --ip-space-5: 1.5rem;
  --ip-space-6: 2rem;
  --ip-space-7: 2.5rem;
  --ip-space-8: 3rem;
  --ip-space-9: 4rem;
  --ip-space-10: 5rem;

  /* Radii: chips and inputs (sm), cards (md, lg), feature panels (xl), pills and round buttons (pill). */
  --ip-radius-xs: 6px;
  --ip-radius-sm: 8px;
  --ip-radius-md: 12px;
  --ip-radius-lg: 16px;
  --ip-radius-xl: 20px;
  --ip-radius-pill: 999px;

  /* Type scale: the steps from xl up grow with the viewport. */
  --ip-text-xs: .75rem;
  --ip-text-sm: .875rem;
  --ip-text-base: 1rem;
  --ip-text-lg: 1.0625rem;
  --ip-text-xl: clamp(1.15rem, 1.08rem + .3vw, 1.3rem);
  --ip-text-2xl: clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
  --ip-text-3xl: clamp(1.7rem, 1.35rem + 1.5vw, 2.4rem);
  --ip-text-4xl: clamp(2rem, 1.45rem + 2.4vw, 3.2rem);
  --ip-leading-tight: 1.2;  /* headings, buttons */
  --ip-leading-body: 1.5;   /* running text (Bootstrap's body) */

  /* Motion (Part 39.5): durations by purpose. */
  --ip-motion-fast: 150ms;    /* colour, focus, small state changes */
  --ip-motion-base: 200ms;    /* hover feedback on buttons, chips, links */
  --ip-motion-lift: 250ms;    /* a card lifting on hover or focus (.ip-lift) */
  --ip-motion-panel: 300ms;   /* panels, drawers, menus, a card expanding */
  --ip-motion-slow: 400ms;    /* page entrance, content revealed on scroll */
  --ip-motion-scene: 600ms;   /* scene and map transitions */

  /* Easing: ease-out for things arriving, spring for playful feedback, standard for colour. */
  --ip-ease-out: cubic-bezier(.2, .7, .2, 1);
  --ip-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ip-ease-standard: ease;
  --ip-ease-in-out: ease-in-out;

  /* Stacking: Bootstrap's scale, which the site shell follows. */
  --ip-z-raised: 1;
  --ip-z-dropdown: 1000;
  --ip-z-sticky: 1020;
  --ip-z-header: 1030;
  --ip-z-modal: 1055;
  --ip-z-overlay: 1080;  /* the search palette, above the header */
  --ip-z-toast: 1090;
  --ip-z-skip: 2000;     /* the skip link, above everything */

  /* Breakpoints (Bootstrap 5). Custom properties cannot be used inside @media, so these are for scripts and as the
   * reference: write (min-width: 768px) or (max-width: 767.98px). */
  --ip-bp-sm: 576px;
  --ip-bp-md: 768px;
  --ip-bp-lg: 992px;
  --ip-bp-xl: 1200px;
  --ip-bp-2xl: 1400px;

  /* Focus and touch. */
  --ip-focus-width: 3px;
  --ip-focus-offset: 2px;
  --ip-control-h: 42px;  /* a standard button or field (.ip-btn) */
}

/* The Teen Academy stacks its own shell (sticky filters 20, glass header 80, menus 90, skip link 300,
 * celebration 400); its Bootstrap modals and toasts keep the site's values. */
.tn {
  --ip-z-sticky: 20;
  --ip-z-dropdown: 90;
  --ip-z-header: 80;
  --ip-z-overlay: 400;  /* the celebration burst */
  --ip-z-skip: 300;
  --ip-focus-offset: 3px;
}

/* Less motion: anything timed with the tokens becomes instant (the layouts also cut every transition then). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ip-motion-fast: .01ms;
    --ip-motion-base: .01ms;
    --ip-motion-lift: .01ms;
    --ip-motion-panel: .01ms;
    --ip-motion-slow: .01ms;
    --ip-motion-scene: .01ms;
  }
}

/*
 * ---------- Learn: the stage, depth and motion (LD2-0, docs/learn/briefs/LD2-pinnacle.md §3.0) ----------
 * One set for the lesson player, the quizzes, Review and the teen rounds, read by every look. The colours of a world
 * (worlds.css) and of feedback (learn.css, light and dark) stay where they are; these are sizes, depth and time.
 */
.ln {
  /* Stage sizes: the lesson and quiz stage (desktop), teaching text, the picture beside the words. */
  --ln-stage-w: min(1180px, calc(100vw - 48px));
  --ln-read: 62ch;
  --ln-pic: min(56vh, 560px);
  /* The action bar at the foot of the player (the stage scrolls above it, never under it); the sheet adds its own
     measured height as --ln-sheet-h while it is open (js/sheet.js). */
  --ln-abar-h: 76px;
  --ln-sheet-h: 0px;
  /* Motion: a screen arriving, a right answer, a wrong answer (3 px, twice, never more), the sheet. */
  --ln-in: 320ms var(--ip-ease-out);
  --ln-pop: 380ms var(--ip-ease-spring);
  --ln-shake: 260ms;
  --ln-sheet: 280ms;
  /* How far things travel: a screen slides up this much as it arrives, a wrong answer shakes this much. */
  --ln-rise: 24px;
  --ln-shake-x: 3px;
}
/* Teens move faster; kids get a narrower stage and a taller bar (their buttons are at least 64 px). */
.ln--teen {
  --ln-in: 180ms var(--ip-ease-out);
  --ln-pop: 240ms var(--ip-ease-spring);
  --ln-sheet: 200ms;
}
.ln--kid {
  --ln-stage-w: min(1020px, calc(100vw - 48px));
  --ln-abar-h: 88px;
  --ln-pop: 460ms var(--ip-ease-spring);
}
/* Phones: the stage runs edge to edge with 16 px gutters. */
@media (max-width: 760px) {
  .ln, .ln--kid { --ln-stage-w: calc(100vw - 32px); --ln-pic: 34vh; }
  .ln { --ln-abar-h: 72px; }
  .ln--kid { --ln-abar-h: 84px; }
}
/* Less motion: everything becomes a short fade and nothing travels. */
@media (prefers-reduced-motion: reduce) {
  .ln, .ln--teen, .ln--kid {
    --ln-in: 120ms linear;
    --ln-pop: 120ms linear;
    --ln-shake: 0ms;
    --ln-sheet: 120ms;
    --ln-rise: 0px;
    --ln-shake-x: 0px;
  }
}